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(jxx» Hypertext CAsmn ooi 'fljai) ^/ian (wxax) d>oixsi 
o »9 . ENQUIRE o^ooVjyj on oiojq fx>ox»\<) .(^j/xiVl 
) 9 >n ^xnl/) bo\xb f\9 Vjico\g . HTML as) ci)093 fV9Q lx) \x& 
/>\()\ ^9 World Wide Web w ^axoin 6 q\ <Vbg ajd)\ 
axDl an HTML wd)\ slax&\) ^V9 q . f 1990 f\& 
ax) , 5^9 f 1969 f\& IBM bO/>w l&j/fiA SGML 
Standardized c 99 >)\ jWxb-lg .w^xxxH onlxH >xn/x)\ 
HTML ax) O)x )09 4 General Markup Language 
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bit) (OkXJOJoJ (W oifis xjd (W 4 f 1991 <^9 )9&j\><D b/» 69V 

(w 1993 f\& (j9 (w t f 1992 f\& ^ omWVl HTML 
on dxa9\ 09 b Cpd l&xxw£>o (W ^)\g HTML Plus bid)\ jIxjoI 
cxjoJox» t]>/)\ uuiu f\9 f 1994 f\& £ (po 4$)W\ jIxjoVI 
£ (w t W3C (World Wide Web Consortium) 

4 HTML 3 )\m\ (WQ HTML 2 jlxxil <po f 1995 f\& 
f\& ^ (w 4 IETF buai&o o» (p^x)l (w f 1996 ^ (pi 

4 HTML 4 )\x)o\ (w 9 HTML 3.2 jIxjo) tw f 1997 

2000 f\& ^9 4 HTML 4.1 jIxjo) <w f 1999 f\& ^9 
<•^9 HTML 4 )lx)oV\ dx» ^9 XHTML 1.0 jIxjoI <w f 

2001 f\& ^99 4 SGML bitUl o» Vx) XML bit) Wx<?lx)io (w 

(w f 2002 ^99 c()S xsj (p.) 4 XHTML 1.1 jIxjo) (w f 

?\<? (j9 (oS 4 XHTML 1.0 Second Edition jIxjoI 
4 XHTML 1.1 Second Edition j\xjo\ <po f 2010 
o» oxjo 9 x)\ (W 9 4 HTML 5 jIxjo) (tx) Licol 2010 f\& $ <po 
\/Xp l/xxxj 0 /X^ ,jx)l 9 HTML 5 bid)\ (p^> W3C buoJax» 

ax9\/j>\ $\ ^xjojoD\ uls >9 4009)1 &9W» ^A)iO» &xj\> t)W\ ^9 

.U99H cxixiu £ axl ^\99 b0/>9 o)9&>»9 
(jxw >kXwx 99 >vx)\ 9 & (p)Vs)\ ^9 HTML bit) £/X>\ £’x)\ <?/ax 3 t)\ \"x& 

.fciDw/xH Tim Berners-Lee ^ jyjyj 
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$ f 1955 f\& wv. 8 ^ Tim Berners-Lee 1)9 
Conway Berners- oVw&yi 9& 0XH99 

.oW^V)) oa) 1 ^ Viiojl Mary ojx)\99 t Lee 
os»V> o» ^ o>jo Jo? Tim Berners-Lee dxa> 
OVV)ico^i bOyii axxm oxa) 1 W 9 1976 f\& ij 9 \ 

40x>oaH biWH ^ 'fs&iu b/&>V &x),c>aH 9 axiLtt^H 9 oxlLdl 

byiwi lx>9)9x109 d)Vxw /)\ 0\9 Vxx» 9 boA>d)\ cWoVxaH (pjbj (m 9 £ doo?9 
D. G. Nash J\ ^VajaM f 1978 am J)9 419 y^xH 

dxx&xH (pii)9 t cxxLx)\ Ol*)l)ol) bo?lxl> ^xjoI/) go 3 l» gxa«x gx» ca> 4 


Generic Macro d»U)\ aViVxxH fc)V»9 fWH mx» 
am b xa) 9 (000)9 am) dam» )\j»mA) odao? <Vw\ 9 4 Expander 
am an (W 4 CERN awm9» ^ k»\/) cxuxx&»9 jlixmA)" )9isi» 
bOyid cximWl /JxaH (ax) o'j f 1984 am J>9 f 1981 
0)90 (j)\ a9\xaVl) 4 Image Computer Systems Ltd 
Sj$\ b/o CERN (j)\ &» f 1984 ^9 .,jXflx)\ ^xAxcd)) ^wxjjo 

(0)0)9 oxxds)) OVilxxH &xa>1) os?)9a)\ 9 bjD/wdl (piixH £ dxxsiV) (ox&\9 

.HTML ojd)l) (o)Vx)\ (w 4 (pi>d)\ 
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.bA& tS/sii) axiVlH o)9Jo)\ oJ cbyju o\ <?/awtH Vx&g 



Tim Berners-Lee 
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cxx) 9 )o Olata dxx&x) lx)l^ /39uafl\ f&tm \»xx^ 
cm) do/S.) q\ tbJaVsil ox&l&i) 9 )xx 9 dxam) f^ai g\ tOW/j 
dxjtrn) f 9 ai q\ 4admj&H ulsWl o» cxxx) dxifox) f^ai g\ tl&l/x) )9>o)\ 
dojdl) f<*ai q\ 4cxxw)\>d\ bdV\ dx» oxxaxdl ^xjol/dl cm) 
(ii» d )9 iOlsdo l&j\ di>^) <V\ ox& />\ J\ ib 9 &i)jd\ cwlx 9 qV\ 
^a>o )qxx) 9)\ <^9 4 Extension >lxx»\9 Name (wal a) 
'^/b X)/5 LA) \S\ 1&)W>\ 0&b\) 0^9 4^)d\/X9\ dim) OtalxwWl 

^ folder options ak*H ooVjo <$>$ Start amVs d9>x)\ 
Hide )Vxx>V\ ollil <pS View )lxx>\ <pS 4 tad*? d<j>xU <pS 4£*d\ 
.extensions for known file types 


£9b>o 9)xxaU OVabo ^xa 9 4c/Va)uod\ ox) cilx>o Ola\xx»V\ ox&9 
4^^ /xxjSlg (avi - wmv - mp 4 - ogv) ob\xx»V\ ^ 
u\ ai»9 yjSSlg (mp 3 - wav - m 4 a) 09)0)1 olal»9 

^nl^xHg uVxW\ oVai»9 4 \a^ ^9 (png - jpg - gif) )vd\ 
(jxw)\ 09XX9 U9X)V 0)9)0 cbx) o\ cib/Sug 4 (exe) dxjjoVV) 09b Vx)V^ 
ok*m) c^x9 ^9)0 cil» <)\ "laptop.jpg" 9& dxxaVV) ciljdl 
oil 4 M myrecord.m 4 a" 9& >lxx»y\) cikU (wul )9xb9H 


.OVabdl ox& />\ 
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dxxxa t oo booV> Ololual &u&> fw. ^JoVi/) o\ (plxi o\ x>Vq 

ooIxjq Vwx>9 doc >\xx»V\) iksj oVj ojj\w ^ 0399)1 ^xaViyO i)\xd\ 
U09) )qV) 4 doCX o\xx»Vl) d/aju <x) 2007 cwxx 9 qV\ on 

dfijt) <x) 2007 cuxx 9 q\ ^9 (W ppt olxxaVl) iIajo otf oolxxH <j 9 

.^xnl/dl oJ^V liiag <, pptx o\x‘x»V\) 
g\ htrnl 9& HTML cxxDl ^9 009)1 OImjo o\xx»V cxmx)l) VnV 

ciix>eo (&X&U9 aaixSoo Ololual l&) OVxxaxllg Olx))\ <, htm 

.bidxSoo 9 /i >9 
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Links Browsers uboouiV 

on oj 4 HTML oxb oaxa)ico (W dp/M ^axojj\H 
.\x& d)" &xa> dwtm) 9_)xx9<) ) 9)09 aawb» 

dxsm) 'f^ai dsalb - S daai \SV» ... Cdj 33 V\ ib>x)\ W/i VjoxV^q 

Jojuioi (W ax)\ (b>x)\ 59J £"x)\ Jw\/)\ cab (jx) Vbx) dxioiuxH ^axobdl 
dxaM) ^axabdl f^ax) ^xxjlsudl a><j) on Enter j;)\ 
dxxs) ax \& d>xj www.google.com JmU\ Jx» av £‘d\ 
axl ^ d>xj WWW.yOUtube.com Jwl/ilg 4 c^/xiVl c>o 
&)\xx) oxte d>xi WWW.cnn.com 4 Ol&^xxaH x&Vm) 

alx>V\ 

W>/b (W HTML wd) o) 9 xbd\ >\<bV\ &xa> o<\/a) ^axxwxH f^a) 
o &>\9 0 x ^9 HTML )\<b V /wxiwdl cx)\k) 9 &i) t fx>bwud) 1 &x&a> (W 

.'fxMwvdl 

bC^JO/) cxx) \xi? Wx9 cxjo^I bc*»/x)\ OVs) (p>/l) V ^axcball 
Client Side VaiV Java Script mk\\ wdU ^9 ox>\q 

4 W>/ix) / 9 /Xw J\ ^\i>o V9 fxMxivdl jl&> dajdl l&xbx) S\ 

_H dx» ^/>V\ OVxxaxHg OVjd)\ a $9 iV&xxx^yd) f^a) bjuaudl d) 
VB.NET J\ a» 9 I C# J\ a» ASP.NET J\ 9 PHP 
oVal)\ oxa wx>/X) f^ad Compiler (p>/i» 00 A/xxa J\ fc\bo 
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Java wdHs CSS oxlHs HTML oalH J\ qx 4t)VxxaxHs 
.OlxlH ox& /mi) OImxcmJI oV ^sooxa)) l&U/Js * Script 
Firefoxg Google Chrome V&,&x»\s b/wj oWxxall 
\xjx >9 Internet Explorers Operas Safaris 
Netscape dx» S/>i\ o\m)oxj\H on wxs)\ x>s >9 t Edge 
UCs CMs Comodo Dragons Baidu Sparks 
Maxthons Slimjets Rockmelts Avants QQs 
Flocks Skyfires Nexts Cometbirds 
.cd$\ (oJli? ^ /Uills >ox3i\ l&/x^s kFlashfoxs 
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Text/Code Editor ><$19 


ol>U) ObxfiSl oolxlS f&tm ojW cjoxH )/>jo 

dx» c*xxH $xmx) (&x&) V ao^)oiU )/>009 4 0flli>co OlakY 

d)V» b> 91 bold blxflj odlSl cbtf <\9>w (px&j ^9 4»99H ^woVi/) 
\S\ <yjig 4 lower o/xjuo ox&g upper ox& 9I italic 
d\x»9 40 > 9 > 9 j\H OIaJIH &xa> />£ o 6\9 4 ^jjo Jq^\ /xxfi W/j erf 
9&9 VuVab )9xb^\ &» >9>9 aH ^woVj/bl 40 O 9 )iOxH )/>jo 

G- 9^9 wain) &» >9>9 aJ\ ^xjob/xU Vjicolg 4 Notepad 
J\ (^9 K c^y\ fVJw Text-Edit q\ 4 Edit 
^ oyj> (pix) cml Text-Edit J\g G-Edit Jig Notepad 
a) HTML cxx) ^9 isb boVji) u\9 \i\ c3b\ 4i\sbV\ boVS^ 

&x)&xwx) a $9 4 < 3 i oOOOiCO q\ 0\>\/X9l cl) /&}&) g\ cxUto 0)9 ch&su 

a\u»Vb <M iia> (W ^xx>OiO d(»x) cxxl^ HTML axDl >\<b \ boVlS^ 
V»\ 4 Ojoju t 99>»9 4 ^xsuiax» £\ ^ <b*suia)\ dxxjaw (W html 

dxsmH booiijl &xjq> ikx) Wl^\9 \x> > 9 $\ 0\)/>co 

9 Notepad-!-+ ^9^9 Brackets ^nVi^ dx» 
Jam) ^xnb/) &» \xxi 0^9 4 /xbU 9 /xxill (^^9 NetBeans 

.oAH dxckiu £99! 09^9 <im) ^>00) 9 00&) 
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0 \idl\g HTML as) 


W)\ am>o OVs) a9Vxal $),i> Wpo (W HTML asl)\ auaisV 
ooVmj d) as) wiu) <j &9 CSS oO/^dlg ao/sH am>o as) duo 
Java Script _)\ os) Vjicolg 4/ui) Jauul Vising HTML os) &» 

.ax^JO/) as) <j&9 

HTML asl) ctodsj xsj \n> ansDl ad Vis (jdsd <a\ Viis aMxd)\g 
(W oil ^a>\ Vg .o>juo)\ (j9 U/j Vn do dsw c^<ds>o (pisiV 


d>b Attributes acuW-g Taps oiojq <Vmx»y\ 
9 *\ utf Vis) (jisg t CSS J\ os) dm) l oVS^g HTML osl)\ 

.(jluicdu d)Jb VisigVxu />\ 
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HTML oalH f Wdl 

<\b (pjj Tags <a» o^ 9 am> HTML cxsDl 
W/j l»xx^ ^ux 9 <;> a*? yjju Tag (wag d ^9 4 V &3 o>juio)\ 
0/^9 oWx^ <x)\S^ b/j V»u <?9 4 W^/» Tag 'fxskd 039)0 do^ 

W/j \»xx ^9 tO/ 3 s)\ boVjii Tag 9 o\ 9 xs)\ o)\xjS Tag cxxjo) 
cjox &)/» ofil&l W/j Wx <?9 tolxxM) ^933 Tag f&tm u 9)0 dmw 

.\jii 89 4 0 >juo)\ <j9 (XBX)o) Tag 'fxSxmj 
^9 /»V\ 09 ^ oxm9 (jU t HTML cxjd)\ (&xxa3x) \xa 9 \i\ 6^9 

.ol9&wd\ 0)1^ 

\jcO owxmsU a)x &9 

Elements -1 
Attributes -2 

:Elements <>*H 

cxsDl oM)o oolx)' xx<? Wx^xmi /)o\xxH ^ VisJ >9 )o3aH9 

d>b /jox^ dk) 9&9 Tags _H gx» Tag oo£ l»xx*9 * HTML 
\jjox>dWi\ \S\ ^xa 9 t (x)>\x) Content £ 9 x><a}\ o&IxdA $uq t o>v 3 )o)\ 
tV&wu 0 / 3 s)\ 9 & \x& <? 9 x>oxH 09 I 9 ax)oj 0/39 a) oo£ £"x)\ Tag _U 
(w »9 wW )9 Start Tag ^9 wlx) oJ /JoVxxH ox& gx» /xox^ 

C 0 JE 3 \x^ kx 9 4 ^ 9 ‘x>da]\ 2^9 (cxw bo Us.b \ 9 wlxxH 0 x 39 1 End Tag 
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\S\ 0&&9 l&) cm) W)V dlfl9\ g\ cwl&j l&) cam) <jx)\ /XiVxxH 

d &9 4 New Line ux> ,)ww iIajd f<$) £’xU Tag _H Ix»x>oanI 
flxMxal (pi) 0^9 4^<)x>oo S\ x> 9) V dsa)V) - * cxl>\x) &09 (oaj 

.teg \)x> yjaxa 4m) Tag J\ \x& 


:Attributes <>>d\ 
\S\ ^xj\9 t Tag g\ /)ox^ do l&) ^xxx) ,jxH cxojl)o>d\ g\ oWH (j&Q 
Tag fxMxyd ( 3 <»n 9 n) i/j/) (&u /Xw^Q/xl) 0)9)0 op /ju <a\ W/j Vxf 

JXXa» 0X)O^>d QM$d &» 0)9)o)\ (fcWil 5X>d9 0)9Jo)\ CXQ/i? 


.iM 


{5 ^ 

4Vj 3 Vx> ^ d\i» dx>oj c99x» IxOr Attributes <>>d\ (&&axj ^9 
W/jg HTML ajddl d>ta yixxld Tag c^lxia <a\ dxSdxL cb/xaxb 
laO 0 ^x 9 <jojW>T t 9 ^x>\ &» 0 /» a» /J 0 \ /JoxxH \x& <lmi\ 


<human name=ahmed height=70 width=35 > 
<human name=amr height=75 width=33 > 
<human name=adel height=80 width=36 > 
<human name=ehab height=65 width=31 > 


od oixx) Human (w»l) Tag x> 9 ) oj\ oL>d Vx^/x9\ Iao 
4diQjV)o>d\ c9^x>\ Ol/» &>)\ Tag _H cxixsu j\/3a) \xa 9 g 
(xajnI t 35 ms&v 70 0J9J09 Ahmed oaa»\ 6 gVV9 
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80 Adel oms\ t 33 75 Amr 

dfo t 31 bao /^9 65 Ehab oua^l t 36 

.>y\ cilbo (p^jjo Tag 
xxj Human oa) 5 J\ g\ 9 * olxlbo £’x)\ (o&ajj o\ u>o M&q 
ox*}\> Height oxxob- Name cTag bo\k) 
cjiaybo xxxaj 'fxMww = jOO/Jlg 4 apioV> Width cxaJ5S\9 
aw ooi HTML J\ ax) (j 9 Tag (03339 £\9 4 ox)o^\ J\ oxxxflU 

.xx) Ijox9 (£/X)w IaY <> 

gl name=amr liia osib o\ aLx ox)oV> J\ oax 9 ooxxbo xxp 
„i> <^9 4name='amr' \j in 9) name =" amr" \i&s 
cJiomxj gxxuo^ gxx) html o&\#>> (ox9 uxA ^ 1x9 ciW 09 b 
.\xl&9 4 address="Egypt" 9) height="77" duo 
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HTML f w ilfo 

wddl (j9 Tag (Wii 9 )\ dJi)9 4<3dW bJinl) cS/jjj t99»i 

oxxoi 0/39 &)& 9 ) c*o\>d\ Tag _)l %s& 4 ah&ndl) /xnl) HTML 
0/3flU a)\ll (pi )9 </p> oi)V&j yjolg <p> anlw yjolg t p 9 & 

4 <p>my text</p> din 4 </p> 9 <P> ou oxxoidl 
din £9 ’a>jo od cam) w 4 img 9& ojspcdl dp/x o&\>^\ Tag Jig 
jn/H 2^99 <img src="son.jpg" /> \i&s oj &9 p ^\i)\ 
^■\i>o % om* &n $lsn £\ Self-Close /xoudl cvnitj £ / 

1 * 0)1 img ^ 9)1 oo£ o\ oIwq 4 </img> li& din 9^1 /nV 
src ax*o\>d \9 / 09 W <img src="son.jpg" > Via 

4 ^i*oxn)\ l&iO/i? W/i ,jd\ o) 9 *o)\ ilxinl 9 (wul 9 )Wn l&) oil) 
oi)\w /n \9 4 hl 9 & 0 /ul)\ o^Vudl o)\ib c*o\ 3 *)\ Tag _)\9 
<3/X c 99 x 0 ln3 cxsdxNn f\N>\ 0^9 </hl> oixl&j /n \9 <hl> 

(pj ))9 Vn\ 9 \ ^ 9 a>jo a) (W ))9 ln\9 4 ^ 9 * 09)1 ^Vx) \xl &9 4 XX) Wx9 cxxl^ 
x>\) ax*o\> 1)39 a) booV>^\ cxoilxoSdl a) (p&xn x >\9 1)39 £ 9 x>oo 09 W 
.cxa^/H oo)x> (mo 9 ) ) \x& ^9 /xxx) l&sn axxnVixn anx9 
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HTML oa1)1 boVo 

o/xxxxH ABC aw S/iu V HTML oxlH 

gouVxxx) O/WuoU boVjiU OoicJu alb * abc 

.oxa]IxH 

caUJ $ yJaxaVlg ObWH ox) S/iu V HTML ajdH 
q <& <p > text </p> ovw39 <p>text</p> 

x) \xHg ooolia /*& ObW» &x&9 f x^q (px]oxx)\ dxaso tub 4 x>\q ^u\xH 

.dflJtx) 100% 0C*X>0|O (OJU 9 H (JXN&\ o\ o» 
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HTML osiuol q»»V>»V\ <Vx^\ 

(jWiUVl <luH cS/ 3 u a\ wV HTML o£*a)iO 

:<jb VjjO s>& 9 tOwaWl bolxp oJ 5 o £x)\ <^9 4bCxa\cAi 

I—<html> 

p- <head> 

<title>Page Title</title> 

—« I—</head> 

p-<body> 

</body> 

L.</html> 

twVaiU (j9 </html> oatelg bo\xx)\ £ <html> Tag %\ 
db d»\ 5 ll) bc>^a\cJ\ £$>q cxiV ox» 9! cdx9 Tags x>9) V oil Jd>^9 

.1&x9 V» 

</head>a9^\9 t &duaH owl) w <head> Tag ^VxiVS 
iOMxdl om\/) /isjw w <title > Tag \SJ\S 

</title>a 9^\9 
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<html> 

<head> 

<title>World Of HTML</title> 

</head> 

<body> 
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<br /> <br /> 
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<br /> <br /> 
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•M alert(window.txtName.value); 
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Script £ 

duw 0111)9 tJoflS o£*fl)o)l 

:^\iH >si)S\ V&p (W 40wx> HTML oMjo 



<html> 

<head> 


<title>World Of HTML</title> 
<script> 


function calc() 

{ 


var numl = Number(window.numl.value); 
var num2 = Number(window.num2.value); 
var total = numl + num2; 


return total; 

> 

</script> 

</head> 

<body> 

Number 1: <input type="text" id="numl" /xbr /> <br /> 
Number 2: cinput type="text" id="num2" /xbr /> <br /> 
<input type="submit" onclick="alert(calc());" /> 
</body> 

</html> 
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Char 

Name 

Dec 

Hex 

Description 

& 

&amp; 

&#38; 


&#x26 


ampersand 

< 

&lt; 

&#60; 


&#x3C 


less than 

> 

&pt; 

&#62; 


&#x3E 


greater than 


&nbsp; 

&#160 


&#xAO 


no-break space = non¬ 
breaking space 

i 

&iexci; 

&#161 


&#xA1 


inverted exclamation mark 


&cent; 

&#162 


&#xA2 


cent sign 

£ 

&pound; 

&#163 


&#xA3 


pound sign 

a 

&curren; 

&#164 


&#xA4 


currency sign 

¥ 

&yen; 

&#165 


&#xA5 


yen sign = yuan sign 

1 

1 

&brvbar; 

&#166 


&#xA6 


broken bar = broken 
vertical bar 

§ 

&sect; 

&#167 


&#xA7 


section sign 


&umi; 

&#168 


&#xA8 


diaeresis = spacing 
diaeresis 

© 

&copy; 

&#169 


&#xA9 


copyright sign 

a 

&ordf; 

&#170 


&#xAA 


feminine ordinal indicator 

« 

&laquo; 

&#171; 

&#xAB; 

left-pointing double angle 
quotation mark = left 
pointing guillemet 
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Char 

Name 

Dec 

Hex 

Description 

~i 

&not; 

&#172; 

&#xAC; 

not sign 


&shy; 

&#173; 

&#xAD; 

soft hyphen = 
discretionary hyphen 

® 

&reg; 

&#174; 

&#xAE; 

registered sign = 
registered trade mark sign 

- 

&macr; 

&#175; 

&#xAF; 

macron = spacing macron 
= overline = APL overbar 

o 

&deg; 

&#176; 

&#xBO; 

degree sign 

+ 

&plusmn; 

&#177; 

&#xB1; 

plus-minus sign = plus-or- 
minus sign 

2 

&sup2; 

&#178; 

&#xB2; 

superscript two = 
superscript digit two = 
squared 

3 

&sup3; 

&#179; 

&#xB3; 

superscript three = 
superscript digit three = 
cubed 

■ 

&acute; 

&#180; 

&#xB4; 

acute accent = spacing 
acute 

d 

&micro; 

&#181; 

&#xB5; 

micro sign 

H 

&para; 

&#182; 

&#xB6; 

pilcrow sign = paragraph 
sign 

■ 

&middot; 

&#183; 

&#xB7; 

middle dot = Georgian 
comma = Greek middle 
dot 


&cedii; 

&#184; 

&#xB8; 

cedilla = spacing cedilla 

i 

&sup1; 

&#185; 

&#xB9; 

superscript one = 
superscript digit one 

0 

&ordm; 

&#186; 

&#xBA; 

masculine ordinal indicator 

» 

&raquo; 

&#187; 

&#xBB; 

right-pointing double angle 
quotation mark = right 
pointing guillemet 

y 4 

&frac14; 

&#188; 

&#xBC; 

vulgar fraction one quarter 
= fraction one quarter 

Vz 

&frac12; 

&#189; 

&#xBD; 

vulgar fraction one half = 
fraction one half 
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Char 

Name 

Dec 

Hex 

Description 

3 /4 

&frac34; 

&#190; 

&#xBE; 

vulgar fraction three 
quarters = fraction three 
quarters 

6 

&iquest; 

&#191; 

&#xBF; 

inverted question mark = 
turned question mark 

A 

&Agrave; 

&#192; 

&#x CO; 

latin capital letter A with 
grave = latin capital letter 

A grave 

A 

&Aacute; 

&#193; 

&#xC1; 

latin capital letter A with 
acute 

A 

&Acirc; 

&#194; 

&#xC2; 

latin capital letter A with 
circumflex 

A 

&Atilde; 

&#195; 

&#xC3; 

latin capital letter A with 
tilde 

A 

&Aumi; 

&#196; 

&#xC4; 

latin capital letter A with 
diaeresis 

A 

&Aring; 

&#197; 

&#xC5; 

latin capital letter A with 
ring above = latin capital 
letter A ring 

/E 

&AEIig; 

&#198; 

&#xC6; 

latin capital letter AE = 
latin capital ligature AE 

Q 

&Ccedil; 

&#199; 

&#xC7; 

latin capital letter C with 
cedilla 

E 

& Eg rave; 

&#200; 

&#xC8; 

latin capital letter E with 
grave 

E 

&Eacute; 

&#201; 

&#xC9; 

latin capital letter E with 
acute 

E 

&Ecirc; 

&#202; 

&#xCA; 

latin capital letter E with 
circumflex 

E 

&Euml; 

&#203; 

&#xCB; 

latin capital letter E with 
diaeresis 

1 

&lgrave; 

&#204; 

&#xCC; 

latin capital letter 1 with 
grave 

\ 

&lacute; 

&#205; 

&#xCD; 

latin capital letter 1 with 
acute 

\ 

&lcirc; 

&#206; 

&#xCE; 

latin capital letter 1 with 
circumflex 
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Char 

Name 

Dec 

Hex 

Description 

I 

&luml; 

&#207; 

&#xCF; 

latin capital letter 1 with 
diaeresis 

0 

&ETH; 

&#208; 

&#xDO; 

latin capital letter ETH 

N 

&Ntilde; 

&#209; 

&#xD1; 

latin capital letter N with 
tilde 

6 

&Ograve; 

&#210; 

&#xD2; 

latin capital letter 0 with 
grave 

6 

&Oacute; 

&#211; 

&#xD3; 

latin capital letter 0 with 
acute 

6 

&Ocirc; 

&#212; 

&#xD4; 

latin capital letter 0 with 
circumflex 

0 

&Otilde; 

&#213; 

&#xD5; 

latin capital letter 0 with 
tilde 

0 

&Ouml; 

&#214; 

&#xD6; 

latin capital letter 0 with 
diaeresis 

X 

&times; 

&#215; 

&#xD7; 

multiplication sign 

0 

&Oslash; 

&#216; 

&#xD8; 

latin capital letter 0 with 
stroke = latin capital letter 

0 slash 

u 

&Ugrave; 

&#217; 

&#xD9; 

latin capital letter U with 
grave 

u 

&Uacute; 

&#218; 

&#xDA; 

latin capital letter U with 
acute 

u 

&Ucirc; 

&#219; 

&#xDB; 

latin capital letter U with 
circumflex 

u 

&Uuml; 

&#220; 

&#xDC; 

latin capital letter U with 
diaeresis 

Y 

&Yacute; 

&#221; 

&#xDD; 

latin capital letter Y with 
acute 

P 

&THORN; 

&#222; 

&#xDE; 

latin capital letter THORN 

3 

&szlig; 

&#223; 

&#xDF; 

latin small letter sharp s = 
ess-zed 

a 

&agrave; 

&#224; 

&#xEO; 

latin small letter a with 
grave = latin small letter a 
grave 
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Char 

Name 

Dec 

Hex 

Description 

a 

&aacute; 

&#225; 

&#xE1; 

iatin small letter a with 
acute 

a 

&acirc; 

&#226; 

&#xE2; 

Iatin small letter a with 
circumflex 

a 

&atilde; 

&#227; 

&#xE3; 

Iatin small letter a with 
tilde 

a 

&auml; 

&#228; 

&#xE4; 

Iatin small letter a with 
diaeresis 

a 

&aring; 

&#229; 

&#xE5; 

Iatin small letter a with ring 
above = Iatin small letter a 
ring 

33 

&aelig; 

&#230; 

&#xE6; 

Iatin small letter ae = Iatin 
small ligature ae 

9 

&ccedil; 

&#231; 

&#xE7; 

Iatin small letter c with 
cedilla 

e 

&egrave; 

&#232; 

&#xE8; 

Iatin small letter e with 
grave 

e 

&eacute; 

&#233; 

&#xE9; 

Iatin small letter e with 
acute 

e 

&ecirc; 

&#234; 

&#xEA; 

Iatin small letter e with 
circumflex 

e 

&euml; 

&#235; 

&#xEB; 

Iatin small letter e with 
diaeresis 

i 

&igrave; 

&#236; 

&#xEC; 

Iatin small letter i with 
grave 

f 

&iacute; 

&#237; 

&#xED; 

Iatin small letter i with 
acute 

T 

&icirc; 

&#238; 

&#xEE; 

Iatin small letter i with 
circumflex 

i' 

&iuml; 

&#239; 

&#xEF; 

Iatin small letter i with 
diaeresis 

6 

&eth; 

&#240; 

&#xFO; 

Iatin small letter eth 

n 

&ntilde; 

&#241; 

&#xF1; 

Iatin small letter n with 
tilde 

6 

&ograve; 

&#242; 

&#xF2; 

Iatin small letter o with 
grave 
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Char 

Name 

Dec 

Hex 

Description 


6 

&oacute; 

&#243; 

&#xF3; 

iatin small letter o with 
acute 

6 

&ocirc; 

&#244; 

&#xF4; 

Iatin small letter o with 
circumflex 

6 

&otilde; 

&#245; 

&#xF5; 

Iatin small letter o with 
tilde 

6 

&ouml; 

&#246; 

&#xF6; 

Iatin small letter o with 
diaeresis 

-f- 

&divide; 

&#247; 

&#xF7; 

division sign 

0 

&oslash; 

&#248; 

&#xF8; 

Iatin small letter o with 
stroke = Iatin small letter o 
slash 

LI 

&ugrave; 

&#249; 

&#xF9; 

Iatin small letter u with 
grave 

U 

&uacute; 

&#250; 

&#xFA; 

Iatin small letter u with 
acute 

U 

&ucirc; 

&#251; 

&#xFB; 

Iatin small letter u with 
circumflex 

U 

&uuml; 

&#252; 

&#xFC; 

Iatin small letter u with 
diaeresis 

y 

&yacute; 

&#253 


&#xFD; 


Iatin small letter y with 
acute 

|3 

&thorn; 

&#254 


&#xFE; 


Iatin small letter thorn 

y 

&yuml; 

&#255 


&#xFF; 


Iatin small letter y with 
diaeresis 

/ 

&fnof; 

&#402 


&#x192 


Iatin small f with hook = 
function = florin 

A 

&Aipha; 

&#913 


&#x391 


greek capital letter alpha 

B 

&Beta; 

&#914 


&#x392 


greek capital letter beta 

r 

&Gamma; 

&#915 


&#x393 


greek capital letter gamma 

A 

&Delta; 

&#916 


&#x394 


greek capital letter delta 

E 

&Epsiion; 

&#917 


&#x395 


greek capital letter epsilon 

Z 

&Zeta; 

&#918 


&#x396 


greek capital letter zeta 

H 

&Eta; 

&#919 


&#x397 


greek capital letter eta 

0 

&Theta; 

&#920 


&#x398 


greek capital letter theta 

1 

&lota; 

&#921 


&#x399 


greek capital letter iota 
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Char 

Name 

Dec 

Hex 

Description 

K 

&Kappa; 

&#922 


&#x39A 


greek capital letter kappa 

A 

&Lambda; 

&#923 


&#x39B 


greek capital letter lambda 

M 

&Mu; 

&#924 


&#x39C 


greek capital letter mu 

N 

&Nu; 

&#925 


&#x39D 


greek capital letter nu 

= 

&Xi; 

&#926 


&#x39E 


greek capital letter xi 

0 

&Omicron; 

&#927 


&#x39F 


greek capital letter 
omicron 

n 

&Pi; 

&#928 


&#x3A0 


greek capital letter pi 

p 

&Rho; 

&#929 


&#x3A1 


greek capital letter rho 

z 

&Sigma; 

&#931 


&#x3A3 


greek capital letter sigma 

T 

&Tau; 

&#932 


&#x3A4 


greek capital letter tau 

Y 

&Upsilon; 

&#933 


&#x3A5 


greek capital letter upsilon 

0 

&Phi; 

&#934 


&#x3A6 


greek capital letter phi 

X 

&Chi; 

&#935 


&#x3A7 


greek capital letter chi 


&Psi; 

&#936 


&#x3A8 


greek capital letter psi 

Q 

&Omega; 

&#937 


&#x3A9 


greek capital letter omega 

a 

&alpha; 

&#945 


&#x3B1 


greek smal letter alpha 

P 

&beta; 

&#946 


&#x3B2 


greek smal letter beta 

Y 

&gamma; 

&#947 


&#x3B3 


greek smal letter gamma 

5 

&delta; 

&#948 


&#x3B4 


greek smal letter delta 

£ 

&epsilon; 

&#949 


&#x3B5 


greek smal letter epsilon 

< 

&zeta; 

&#950 


&#x3B6 


greek smal letter zeta 

n 

&eta; 

&#951 


&#x3B7 


greek smal letter eta 

e 

&theta; 

&#952 


&#x3B8 


greek smal letter theta 

i 

&iota; 

&#953 


&#x3B9 


greek smal letter iota 

K 

&kappa; 

&#954 


&#x3BA 


greek smal letter kappa 

A 

&lambda; 

&#955 


&#x3BB 


greek smal letter lambda 

M 

&mu; 

&#956 


&#x3BC 


greek smal letter mu 

V 

&nu; 

&#957 


&#x3BD 


greek smal letter nu 

s 

&xi; 

&#958 


&#x3BE 


greek smal letter xi 

0 

&omicron; 

&#959 


&#x3BF 


greek smal letter omicron 

IT 

&pi; 

&#960 


&#x3C0 


greek smal letter pi 

P 

&rho; 

&#961 


&#x3C1 


greek smal letter rho 

S 

&sigmaf; 

&#962 


&#x3C2 


greek smal letter final 
sigma 

a 

&sigma; 

&#963 


&#x3C3 


greek smal letter sigma 
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Char 

Name 

Dec 

Hex 

Description 

T 

&tau; 

&#964; 

&#x3C4; 

greek smal letter tau 

U 

&upsiion; 

&#965; 

&#x3C5; 

greek smal letter upsilon 

cp 

&phi; 

&#966; 

&#x3C6; 

greek smal letter phi 

X 

&chi; 

&#967; 

&#x3C7; 

greek smal letter chi 

Y 

&psi; 

&#968; 

&#x3C8; 

greek smal letter psi 

00 

&omega; 

&#969; 

&#x3C9; 

greek smal letter omega 

0 

&thetasym; 

&#977; 

&#x3D1; 

greek smal letter theta 
symbol 

Y 

&upsih; 

&#978; 

&#x3D2; 

Greek upsilon with hook 
symbol 

00 

&piv; 

&#982; 

&#x3D6; 

Greek pi symbol 

• 

&bull; 

&#8226; 

&#x2022; 

bullet = black small circle 


&hellip; 

&#8230; 

&#x2026; 

horizontal ellipsis = three 
dot leader 

1 

&prime; 

&#8242; 

&#x2032; 

prime = minutes = feet 

II 

&Prime; 

&#8243; 

&#x2033; 

double prime = seconds = 
inches 

- 

&oiine; 

&#8254; 

&#x203E; 

overline = spacing 
overscore 

/ 

&frasl; 

&#8260; 

&#x2044; 

fraction slash 

p 

&weierp; 

&#8472; 

&#x2118; 

script capital P = power 
set = Weierstrass p 

3 

&image; 

&#8465; 

&#x2111; 

blackletter capital 1 = 
imaginary part 

5R 

&real; 

&#8476; 

&#x211C; 

blackletter capital R = real 
part symbol 

TM 

&trade; 

&#8482; 

&#x2122; 

trade mark sign 

K 

&alefsym; 

&#8501; 

&#x2135; 

alef symbol = first 
transfinite cardinal 

<- 

&iarr; 

&#8592; 

&#x2190; 

leftwards arrow 

T 

&uarr; 

&#8593; 

&#x2191; 

upwards arrow 


&rarr; 

&#8594; 

&#x2192; 

rightwards arrow 

1 

&darr; 

&#8595; 

&#x2193; 

downwards arrow 

<—> 

&harr; 

&#8596; 

&#x2194; 

left right arrow 


57 (oij ‘Ljt h^> 

www.hassouna-academy.com u~VI £4j^' <J^ J ' 
















































HTML Zero to Hero - From Hassouna Academy ^ 


Hassouna Academy Basic Rock - Like - Subscribe - Share - Views +0 


Char 

Name 

Dec 

Hex 

Description 


&crarr; 

&#8629; 

&#x21B5; 

downwards arrow with 
corner leftwards = carriage 
return 

<= 

&IArr; 

&#8656 


&#x21 DO 


leftwards double arrow 

It 

&uArr; 

&#8657 


&#x21 D1 


upwards double arrow 

=> 

&rArr; 

&#8658 


&#x21 D2 


rightwards double arrow 

It 

&dArr; 

&#8659 


&#x21 D3 


downwards double arrow 

<=> 

&hArr; 

&#8660 


&#x21 D4 


left right double arrow 

V 

&forall; 

&#8704 


&#x2200 


for all 

5 

&part; 

&#8706 


&#x2202 


partial differential 

3 

&exist; 

&#8707 


&#x2203 


there exists 

0 

&empty; 

&#8709 


&#x2205 


empty set = null set = 
diameter 

V 

&nabla; 

&#8711 


&#x2207 


nabla = backward 
difference 

G 

&isin; 

&#8712 


&#x2208 


element of 

0 

&notin; 

&#8713 


&#x2209 


not an element of 

3 

&ni; 

&#8715 


&#x220B 


contains as member 

n 

&prod; 

&#8719 


&#x220F 


n-ary product = product 
sign 

7 

&sum; 

&#8721 


&#x2211 


n-ary sumation 


&minus; 

&#8722 


&#x2212 


minus sign 

* 

&lowast; 

&#8727 


&#x2217 


asterisk operator 

V 

&radic; 

&#8730 


&#x221 A 


square root = radical sign 

oc 

&prop; 

&#8733 


&#x221 D 


proportional to 

oo 

&infin; 

&#8734 


&#x221 E 


infinity 

z 

&anq; 

&#8736 


&#x2220 


angle 

A 

&and; 

&#8743 


&#x2227 


logical and = wedge 

V 

&or; 

&#8744 


&#x2228 


logical or = vee 

n 

&cap; 

&#8745 


&#x2229 


intersection = cap 

u 

&cup; 

&#8746 


&#x222A 


union = cup 

1 

&int; 

&#8747 


&#x222B 


integral 


&there4; 

&#8756 


&#x2234 


therefore 

~ 

&sim; 

&#8764 


&#x223C 


tilde operator = varies with 
= similar to 


&cong; 

&# 8773 


&#x2245 


approximately equal to 
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Char 

Name 

Dec 

Hex 

Description 

* 

&asymp; 

&#8776; 

&#x2248; 

almost equal to = 
asymptotic to 

* 

&ne; 

&#8800; 

&#x2260; 

not equal to 

— 

&equiv; 

&#8801; 

&#x2261; 

identical to 

< 

&le; 

&#8804; 

&#x2264; 

less-than or equal to 

> 

&ge; 

&#8805; 

&#x2265; 

greater-than or equal to 

c 

&sub; 

&#8834; 

&#x2282; 

subset of 

3 

&sup; 

&#8835; 

&#x2283; 

superset of 

<£ 

&nsub; 

&#8836; 

&#x2284; 

not a subset of 

C 

&sube; 

&#8838; 

&#x2286; 

subset of or equal to 

3 

&supe; 

&#8839; 

&#x2287; 

superset of or equal to 

© 

&oplus; 

&#8853; 

&#x2295; 

circled plus = direct sum 

© 

&otimes; 

&#8855; 

&#x2297; 

circled times = vector 
product 

1 

&perp; 

&#8869; 

&#x22A5; 

up tack = orthogonal to = 
perpendicular 


&sdot; 

&#8901; 

&#x22C5; 

dot operator 

[ 

&lceil; 

&#8968; 

&#x2308; 

left ceiling = APL upstile 

1 

&rceii; 

&#8969; 

&#x2309; 

right ceiling 

1 

&lfloor; 

&#8970; 

&#x230A; 

left floor = APL downstile 

1 

&rfloor; 

&#8971; 

&#x230B; 

right floor 

( 

&lang; 

&#9001; 

&#x2329; 

left-pointing angle bracket 
= bra 

) 

&rang; 

&#9002; 

&#x232A; 

right-pointing angle 
bracket = ket 

0 

&loz; 

&#9674; 

&#x25CA; 

lozenge 

4 

&spades; 

&#9824; 

&#x2660; 

black spade suit 

4 

&clubs; 

&#9827; 

&#x2663; 

black club suit = shamrock 

V 

&hearts; 

&#9829; 

&#x2665; 

black heart suit = valentine 

♦ 

&diams; 

&#9830; 

&#x2666; 

black diamond suit 


9)9 4)9»/)\ dps) to d) 4 &>/» aud \x& §)W\ 6 gjto\ ^9 
4 ) 9 »/)\ (j9U) GX» /XXlllQ /U^l U3/1)V\ C^\x &9 &>/» U/j 

.)9»/J\ on w/j l» do jc*’d Unicode Table _H c>o\ to 
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: 1 



<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="#FE9" text="#FF0000"> 
<hl>I love HTML Language</hl> 
</body> 

</html> 


:1x0 o&lmH $)WH cxi/Xi uq 


D test.html 


□ X 


I love HTML Language 


(W9 bgcolor c\Uiol> 'fliXual) oXsuoH oxfll> <pj oo\ Jd>^j 
.text ax)oV> 'flxXxwiV) axiuo)\ ^ cxoj S\ twqlj 
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: 2 ^VSjo 
: a)&fl>d9 ><$\ col) 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="navy" text="lightblue"> 

<hl>I love HTML Language</hl> 

Shearts; &nbsp; &nbsp; And this is my page 
</body> 

</html> 

dl&ll) \sti o&lmH $)W)\ >siiH o)/>o X3U 

Q test.html — □ X 


I love HTML Language. 

V And this is my page 


body /Joijtl) text opo^xH Jahh CX)\ Ja>V 
d>\) oxmcM ^ opiH /SVj licjhtblue 

.o»\> qI hi 
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oxx) (W &hearts; ajbdu\<)) ciaH ;») c\)\ji lias Vjj\ 

.^■\j S\ ogx) S')\& cxoi qj &nbsp; o)wnW) 


: 3 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="navy" text="lightblue"> 
<hl>I love the Web Shearts;</hl> 

<hl>I love HTML Language &#9829;</hl> 
<hl>I love Hassouna Academy &#x2665;</hl> 
Copyrights &copy; All rights reserved 
</body> 

</html> 
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:^)\D\ 1x0 a&lmH /&)&) $)W)\ >si)S\ o)/>o jju 

|- 

0 test.html — □ X 


I love the Web V 
I love HTM L Language V 
I love Hassouna Academy V 

Copyrights © All rights reserved 


9 &#9829; 9 &hearts; (W ail Ja>V 

.ulflU ;») \ 9 /&M bo^iU 9 &#x2665; 
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: 4 

:ojoa>\9 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="#FE9" text="darkred"> 

<hl> 

&#69;&#x003D;&#109;&#99&sup2; 

</hl> 

</body> 

</html> 


1x0 a&lmH $)WH o)/>o xx> 



d) oAb'j oblsB a )\ti (W ail 

. Vjicol j<*B/)\) WwljJ (W (jdl cPq 
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: 5 d\x» 
:cxiaa>\9 ^\H\ ><$1 c*xA 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="#FE9" text="darkred"> 

<hl> 

&#77;&#79;&#72;&#65;&#77;&#69;&#68; 

</hl> 

</body> 

</html> 


1x0 cx&lmH /&)&) $>WH cx)/>o xxj 


1 r 1 test.html 

- □ X 

MOHAMED 



oo£ o\ oqwq )<*»/)l) MOHAMED (wu\ lux)" lxi\ 

• c5/> £\ 
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: 6 

(W boVji) (&9 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolon="#FE9" text="darkred"> 

<hl> 

&#1571;&#1576;&#1580;&#1583; 

&nbsp; 

&#1607;&#1608;&#1586; 

</hl> 

</body> 

</html> 


1x0 a&lmH $)WH isi)S\ 00 />o xx> 



^ S\ boVjj olU doioio 3 ^ 1x0 9 

\w\ aw/sil bid)\ V oCxsdo c 3 V) 9) ^ 099 9X&9 

.o£*suia)\ dl&) (td) bd)/P )9 »j l&xi) (^9 
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Break Tag /W\ «u»9 

z)m (j)\ >33 (w body <>sH ^ oj£ V»xV^ html ox) ^ 

i# a t ? J 

U/> ^xa5 o9W» £\ a? \x)\ /WO V )) 9 X^\ gx» Enter )>) wx> 

:o)os >\9 ^ViH isilll ovjjlg ciMXflb 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="#FE9" text="dankred"> 

Welcome To My Website. 

My Name Is Mohamed. 

I Live HTML Language. 

</body> 

</html> 

:ox)\lH oj^V) 1 x 0 kjVxH 09)09 

Q test.html — □ X 

Welcome To My Website. My Name Is Mohamed. I Live HTML Language. 


/}m ^ q&tf cfe &»9 /}m o!a> J 3 2009 (W oil 




.ciiQ/Sil <\x)l x>\q 
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^■\j 9^9 4 db /to 6>33 cto*) Si\\ br )<p <jj\3 Ix&g 
Vjj\ l&Wg t to <br> cu)\jj oh aH o» S\ oJ cm\ 

."/to d/i\ W u)<)H oSsdp £ a) 

:atod (W J\j]\ oo 3 o br (WU9)\ bo/>d) 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolon="#FE9" text="darkred"> 

Welcome To My Website. 

<br> 

My Name Is Mohamed. 

<br> 

I Live HTML Language. 

</body> 

</html> 


:cxd\iH 1 x 0 kilxH 09)09 


0 test.html — □ 

X 

Welcome To My Website. 


My Name Is Mohamed. 


I Live HTML Language. 

C- 



.eiis cijoj /to d /33 dxs)V) br _H oil toV 
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Horizontal Rule Tag &J\ ^ 

itatf /]w» /x)am) f <ja_) oollg 4 br (pju<*H di» hr (ojuq 

/JoVxxH 9I ^WiVl q\ &x&Wa)\ gu) d)oVs 9\ djlsO o>juio)\ cb/X) 
Jm>9 O)^ $)J) \x> d&Wi dim) 03/>d o\ gIwq 4 toviucdl ^9 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="#FFF" text="darkblue"> 

Welcome To My Website. 

<hr> 

My Name Is Mohamed. 

<hr> 

I Live HTML Language. <hrxhrxhr> 

</body> 

</html> 
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:^\1H dl&H £ IaO Ws 0 /» do ^9 hr /u\i /&}dj jjdq 
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Paragraph Tag ol/aiH <^9 

CXOJOX&H P 'flxXXWil 0^01 C0^\ OXflJiO (j9 0/39 boljj W/j W)^ 

:cxiafl>\9 ^\H\ >9^ oo^l P (WN9H o)/>d)9 tOl/aaU cx^lxxa) 

<html> 

<head> 

<titlex/title> 

</head> 

<body bgcolor="#FFF" text="dankblue"> 

<P> 

Welcome to the web world. Web in all life. We often use websites. 

</p> 

<P> 

Learn HTML to be able to establish your website professionally. 

</p> 

</body> 

</html> 



: ^ViH 1 x 0 oXiuoH /&& 03 /SxU xjoq 

[ r ] test.html 

- □ X 


Welcome to the web world. Web in all life. We often use websites. 


Learn HTML to be able to establish your website professionally. 
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oqx) 1&3 oo\>d\ /W\ Oi>\<) S,>y\ cxlaxxxuo 0/39 do o\ 

/xm) Ixxx 9 9)9 t i3x> /W br f&mi o\ 09x39 d>x3 
.cxlaxxxuo 0/39 do 09I0 ^.axicxxjdl k»V3/3 o’x 9 \j 


d(»x)\ duo 09)0 ^xaxokll obVx cddaxx Vxxx 9 \S9 


D test.html — □ X 

Welcome to the web world. Web in all 
life. We often use websites. 

Learn HTML to be able to establish 
your website professionally. 


6x1)9 4 03^3 9) (yo/jbdu 9) /)wi 3 0/aa)\ uiV) <19x13 (p&J V cxil Jd>V 

.cxlaxxiuo 0/39 do o'l (cx&Vl 
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(j£ /^\ + liljLujj JALujj liljILulilj - (JjjLujSH aj'v*^ 4_jj. :<^ AoajjISI 

www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

Browsers Supported £A*#vm* 1 \ 


^b- ofiSg t Vja3V9^x>\g 0 \M)oxaJI £ 9^930 (fc&sxi ol \x> fla 
o)/^ \x) ux>o c 99 w (xw/iil <VxwiV\ ulxxxxal GWJiV9 o<$ 

.ofliboo 0\M)ox» oVxsxxi £xH &99*d\ 

oj\ (pl^l CXQJD 'fXMxypg cSi boob^l bSsop ciW xx^ 

Ob&Xcd/dl dpx £ 0 » 9 ^X» /X^ 09 ^ (jXH CXQJD X> 9 _) 

9)9 (jX> owxflj ^Juoxxdl cxd)V9 fx^ c Am q\ (Wx 9 ^xflxobdl o\ urn) 

* - ^ a ** A ^ 

Visj/^Q oxxsjo f 9^9 l&) bCxioo ^bioj o\ dabodl gx» ^xa 9 t \x)x> oV) 
£jliw 3 (W 4% 100 d/ajo W)\ jM 9 'fQyJ d> 9 > 

. Vjicol iIaju ^9 (wx9 ^ioox» ^ V&)/^ ^x» q\ 4iixxxj V tail <^>16x9 
(jx&x» d)" c9/5x) o» ^xag d3 ai? cd/xW\ OV»sdx» X>9) 

obo \)i\9 osix9 4 \SV» iIajo V 9 4 \SV» (jii? iIajo 
.^ 1x9 oXs9^» ^xx)ox9 Objuoxdl cJ^l iIajo V 
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Deprecated Tags wuuil 

(&.i oj\)x 9 f 9x1*9 x>93 oil t9/5x o\ lx> f\& 

d> /oj&jxaH q’x& >\ t)\ .strike^ font^ center dx» 

(JlXJ o\ \&A& XAAJU V l&X»X>OXlll 9 ) (jj>9 

9\ d)x) oJ 09V5.H (pd V» 05 " e\ (jdxH 4(^9 (j 9 Ixxl&j l&xlsil 

. \x> dd 9 y\ u\x)l\ \x& ^9 ^9^9)1 ox& 0)9 4/D \ 
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Text Tags cox) l >iJVSi\ fw 


Vx) ^X» OiOiH /USD X)/j C/V 9 QV\ ciQJt) (j 99 cjo^xoxH d»VxxH xxs? 

#11 t | || a j i u j ^ 

AS) I \"xl& q\ 4 )9& XS*)\ \"xl& V&XAxj il’x)^ )9i8 XX)\ 0)Vx) GX» 

/XX30 xj/j wjo 9I 4 b& x>o\ \\\& g\ 4 b& x>o\ \’xl& g\ 4 jg& 
J\ 4 oV>5VV 9*1 $xmH cxxxxj) /xxsj q\ 4 bxXo oa&» £>9x9 cxcdH ^9 
HTML wdH &» cxh&xa) l&tatfii o\ gx5ju9 4 0/Xx)S\ Olxlddl o’x& >>\ 

4^xm’xU /&iax) (wu^l d>\x) cxcxxH )\9X> />\ cxai cxxxx’xj $9x139 4 
cxj/MJl &» d&xu /»V\ o\ 3 /j $9x11 cxx)\xH ^9x119)1 U/^ Wx^9 

:Jij \jO cxxwxWHg 


bold dxax cxqj dxud b (WX19H • 

:cxjM>\9 body <p^\ (j9 >9^ o 3 j\ 

This Is Normal Text <br> 

<b>This Is Bold Text</b> 

:^\ d&V) 1*0 U)<d\ &*a)|0 /&}w CX)/>ol\ XX)Q 


Q test.html — □ 

X 

This Is Normal Text 

This Is Bold Text 
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£99 up* dj\s) strong (w»9)\ • 

:cxiM>\9 body <>x)\ (j9 09$) ojj\ 

This Is Normal Text <br> 

<strong>This Is Strong Text</strong> 

gUH V) US' 009)1 oo/XxH x»9 


D test.html — □ 

X 

This Is Normal Text 

This Is Strong Text 



on daS\ opo iIaju o\»9 so Strong (WN9H9 b (0009)1 o\ 

.J&9>Jjo d)db 


italic d)\» cvqj uas) 1 (po»9)) 
:cx]m>\ 9 body <>x)\ ^ (j)\I)l 09 $) ooJ\ 


This Is Normal Text <br> 
<i>This Is italic Text</i> 


O09)\ i&JUiO 00/Xx)\ X3D9 


Q test.htm! — □ 

This Is Normal Text 
This Is italic Text 


X 


axsxxi) oa9\9 t59/> 09)0 o\ gx» Vx) opjll ds> i (po»9)\ o\ 

<jXxx)d)\ cx)oV» t99/> o>a)o\ ( Vu»\) OAxaiosuo) 
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d)W)l) cm& emphasized 09a opj iWx) em (w»9)\ • 

:oJm>\ 9 body <>x)\ (j9 o 3 j\ 

This Is Normal Text <br> 

<em>This Is emphasized Text</em> 

gUH 03^V) \£> 009)1 0 >JD |0 0 )/>d)\ XX )9 

D test.html — □ X 

This Is Normal Text 
This Is emphasized Text 


I/xjj (fc&jioxi ol&iiu em ^9)19 i (0JN9H o\ Jd>^) 

underline Jd> abo c**) dax) u ^9)) • 

:odifl>\9 body <>x)\ ^ ^)\i)\ oJj\ 

This Is Normal Text <br> 

<u>This Is Underline Text</u> 

:<j)\i)\ dS^)V) Cd^\ /&}w 00/M)\ X3D9 


Q test.html — □ 

X 

This Is Normal Text 

This Is Underline Text 





.cx) 9 &m) cvcod\ UX b> (W») U ( 0 JN 9 H o\ 
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opj da*) del S • 

body (j 9 ojj\ 

This Is Normal Text <br> 
s <s>Text using s Tag</s> 

- del <del>Text using del Tag</del> 

00^)1 0)/>dH X30Q 



opj Wsbo del (pju <^9 S (pjusM o\ Jd>^) 

inserted o>\)*U (w c*oj das) ins • 
:cxiM>\9 body <;nH £ o 3 j\ 

This Is Normal Text <br> 

My Text With <ins>Text Inserted</ins> Again 

O0q)l OtedO 0)/>dH X30Q 

Q test.html — □ X 

This Is Normal Text 

My Text With Text Inserted Again 

csVxqjo oio 3 oj'Oq z&iax) opiH oN) b> ins (pju<d\ 

.JooVl opiU 
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superscript >oa)\ J^\ c*oj ita) sup quu^I • 
:oJm>\ 9 body (j9 o 3 j\ 

mass-energy equivalence: E=mc<sup>2</sup> 

:^\ 4&V) 1*0 009)1 /&}w bO/Sx)\ X3D9 

Q test.html — □ X 

mass-energy equivalence: E=mc- 

.(jXniaH /iam)\ 09I0 SUp (001*9)1 il>b qoi \» o\ 

subscript /W\ daxwl o& d/\s) sub ^9)1 • 
:cxiM>\9 body (j9 (j)\i)l ciA 

HTML<sub>HyperText Markup Language</sub> 

:^\ V) 1*0 009)1 a>d)|0 z&iw 00/>d)\ X 3 D 9 

Q test.html — □ X 

HTMLjjyp er 7 ex t Markup Language 

.^u)d)\ /jbo&H dfixal 09^ Sub (po»9)\ d>ta qo)o V» o\ 


79 

www.hassouna-academy.com u~V' ^ ljL**, J*—<j JajI 













HTML Zero to Hero - From Hassouna Academy ^ 

Hassouna Academy Basic Rock - Like - Subscribe - Share - Views +0 
www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

f\n opri Marked Text oaj W mark • 

:cxiM>\9 body (j 9 o 3 j\ 

You can learn <mark>HTML</mark> easily 


J\ dS^V) 1*0 009H aSsuo X3UQ 


0 test.html — 

□ 

X 

You can learn HTML easily 




axl^ (pxtalH (ol) mark (pj 4 jq)\ d>ta ooi \» o\ 

GU) GX» /SDoVl 


Preformatted text ^mU o& iksl pre • 


:a}afl>\<) body <>><H ^9 (Jj\ 


This Is 

Normal 

Text 

in multiline 

And many 

<pre> 

spaces <br> 

This Is 

Preformatted 

Text 

in multiline 

And many 

</pre> 

spaces 
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:^\ d&V) Vftf u)9)\ OXSOO /&}w CX)/Xx)\ X 3 DQ 

Q test.html — □ X 

This Is Normal Text in multiline And many spaces 

This Is Preformatted 

Text in multiline 

And many spaces 

$xm») 9& VjoJ cjkqj cx)\xl W/j V»u£ d&wu pre (po»9)\ 
ibxxxa g\ O/Xxl OlsWa ex) dsipg 9)9 ($xm)\ 

^\ixi V VjJqjIq t x)x> t);xD br (j)\ ^\ixj V cxl>\x) 

.asW» d/\s) &nbsp; (pjuVl oo\il J\ 

abbreviation jVxoixl 00 cxoj iUx) abbr (w»9)\ • 
ioJmxIq body <>x)\ (j9 ooi\ 

<abbr title="HyperText Markup Language">HTML</abbr> 

:^VSU d&V) 009)1 oXflJo /&}&) cx)/Xx)\ x»9 


0 test.html 

□ 

X 

HTML 
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z&jw bo<$jfc)\ HTML oa) 5 J\ 9)9 

: J\j]\ Wf i5/>V\ )V)oj>l 


0 test.html — □ X 

HTJ 

ML 


HyperText Markup Language | 




)V)oj>\ oIa)o 0)1^ yjio 3 >o abbr ^9)1 o\ Jb>^j 
Vjicolg oxli? \x)yi \S\ W/j W<? HTML duo 

)V)iol>V\ OIa^ cu\ilS ,j&9 t oJ title oxjoV> oVnul (oi o 3 \ i>>^j 

.l&jl&jbV l&) 

aXO/dl olsp'l duo ^uiui) oio 3 iIax) code (WU9H • 
:oJm>\ 9 body (j9 09^ ov)j\ 

string strName;<brxcode>string strName;</code> 


gvij\ o&V) y' u)9)\ oMXi a)/>ol\ X3DQ 


0 test.html 

— 

□ 

X 

string strName; 

string strName; 





aaj/ioJl 0X&9 t aflijt>oo aa)/iw cjoxH /&M code (MN9H o\ Jb>^j 
. dojcksl dliA) cuXO/ud) b<9/an oi>o olspVl oa)/Jo <j& 
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defines a ol^/juD ddg dt9 dl f9mH • 

description list/ terms 
:aiafl>\9 body <>xH ^9 ^\iU o 3 j\ 

<dl> 

<dt>Food</dt> 

<dd>Meat</dd> 

<dd>Rice</dd> 

<dt>Drink</dt> 

<dd>Milk</dd> 

<dd>Coffee</dd> 

</dl> 

:^\ to 00^)1 0>JD|0 /&}&) 0)/>d)\ X30Q 

D test.html — □ X 

Food 

Meat 

Rice 

Drink 

Milk 

Coffee 

t( jbo\ cxox) dt (WN9H bJ>\x)9 t 0l»9)jua)\ ^ ^9’x>o dl (WU9H 
(P><D\ l&> Food 'fVxioil bowV9 tW ^09 4^/9 cxox) dd ^9)19 
Milk ox) V&i Drink ^Rice bV\9 Meat 

.Coffee 09&99 
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da*) summary^ details ^9^9)1 • 
:oJm>\ 9 body (j9 o 3 j\ 

<details> 

<summary>HTML</summary> 

HyperText Markup Language 
</details> 

:^\ V) US' 009)1 o)/M)\ x»9 


H test.html 

— 

□ 

X 

► HTML 





VjcO ,&)do axl^ JdjuaII n^9 Vis)\sx>o q HTML 

g\D\ d&V) 


l'] test.html 


□ 


X 


T HTML 

Hyper Text Markup Language 


o\ &x)auiU9 4 o'j Wf t 59 w G/>\ 0/» oxl^ 9)9 


.c\wXflb 


PAGE 84 


Create Account Now www.hassouna-academy.com 













<Ui! JJaL — cit jj^VI fjl J AjIjJI O' 4 HTML 4*3 

(j£ /^\ + liljLujj jaLuij (iSjILuilj - (j^LuiVl aj'v*^ 4_jj ■ ^ AoajjISI 

www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

Ixxte d&wu summary (WU 9 H &» details qju?)\ o\ 9 \x &)9 

(jS cxx» (pi>oj c^>o G9& ux>o O/WJ cxxlnoiu &x&\9» Afo? 

.l&jl&M fx^ g\ dpoVaxH )W>\ 


Defining Term u\>Sb>p& 6i/x oj cxoi das) dfn ^ 9)1 • 

:cx}afl >\9 body <>><)\ ^ <j}\xH o3j\ 


<pxdf n>HTML</dfn> 

is the basic native language for creating web pages.</p> 

OijSiiVj VjjO 009)1 obsoo cx)/M)\ xsdq 


Q test.html — □ X 


HTML is the basic native language for creating web pages. 


cx9/xi c 99 x» cxl>\x) 2069 ) dfn (jxx» 9 )\ flxMxal (W oil Jd>V 

.title cxpo^H (j 9 )V)oi>V\ OlaJo &XP 9 <a5uw Voicolg t x 5 J Wx 9 
:oJbix>\Q body /Xcnsil d>b J\x)\ osiftl \q U/> 


<pxdfn title="HyperText Markup Language">HTML</dfn> 
is the basic native language for creating web pages.</p> 

:HTML uixa) xx^ cxx)\i)\ cx&UxH Sj>\ 0 /» 00 /M)l xx )9 

Q test.html — □ X 



HT ML is the basic native lang uage for creating web pages. 

HyperText Markup Language | 

.)Wxx>V\ OldJ )W>V abbr (w» 9 )\ dx» olx»x>dx»\ lxi\ Jd>V 
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Keyboard t)l>n aw/jw opj dax) kbd • 

input 

:aiafl>\9 body <;n)\ £ o 3 j\ 

This Is Normal Text <br> 

<kbd>This Is Keyboard Input Text</kbd> 

gun itfadu uo 009)1 OtedO 00/>d)\ X30Q 



Keyboard J\ ^ kbd d>\x> ooh U> 

.Input 

Sample ooi dax) samp • 

:cxiafl>\9 body <;n)\ £ M v&\ ooj\ 

This Is Normal Text <br> 

<samp>This Is Sample Text</samp> 


gU)\ V) Uo 009)1 ONaJO OO/XxH X 3 D 9 


Q test.html 

— 

□ 

X 

This Is Normal Text 

This Is Sample Text 





.Sample dta samp d>\u U> i*>V 
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/wuo c^j iks) small (w»9)\ • 

:oJm >\9 body <;n)\ (j9 o3j\ 

This Is Normal Text <br> 

<small>This Is Small Text</small> 


009)1 &*fl)|0 0)/>d)\ X3D9 


D test.html 

— 

□ 

X 

This Is Normal Text 
This Is Small Text 





./XJUG oaX>- ^.ugj small (W»9)\ d>\u ooi \» Jd>V 

Date/Time 0*99 $1 &))\a 3 cxoj d^) time ^9)1 • 

:odifl>\9 body <>x)\ ^ ^)\i)\ 

<time>2018-ll-21 08:00</timexbr> 

<time datetime="2018-ll-l"> 

The first day in November 
</time> 

gun ^V) uf u)9)\ ONSUiO /&}w 00/M)\ X3D9 
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d>ta Wxtf qI U99H q\ a)\jj aia.) oil Jd>V 

oaxs &X&99 time d>\x) opj boljj a 3 u\) 9\ time 
.datetime awoUl d>b cs$\ 

Variable /xskY o& iks) var • 

:aiM>\9 body o 5 j\ 

This Is Normal Text <br> 

My <var>Variable</var> Is Here 


:^\ d&V) 1*0 009)1 otedo oO/XxH xxj9 


0 test.html 

— 

□ 

X 

This Is Normal Text 

My Variable Is Here 





(pow9)\ d>b ooV a? Variable buodx)\ t9^j>\ Jd>^j 

.var 

oxxwo a&> 9I c*a>o$d ol&mml a) cxcd dax) cite (WU9H • 

:cxiafl>\9 body <>x)\ ^9 ^\iU do\ 

The author of this book is 
<cite>Ahmed Hassouna</cite> in 2018 
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:^ViU dS^V) 00^1 0 >jU |0 0 )/>oJ\ X 3 UQ 



.cite cjoxH d>b o&sxd do^ (W ail Jd>^'j 

quotation ama» opj das) q (wu<*)\ • 

lajasxlg body <>x)\ (j9 ><$l ovjjl 

We will quote the sentence 
<q>I saw the moon shining</q> 

:^\ d&V) OOqH 0)/>d)\ X30Q 

D test.html — □ X 

We will quote the sentence "I saw the moon shining" 


I saw the moon shining ak*)\ oulhal (w ail J&>to 
.omVu 9\ ,ji»^ gu) ^mox) q £ l&Jbhg $)/i> afiSg <, 
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<3 >)\> gx» op 3 blockquote • 

:cxiM>\9 body (j 9 o 3 j\ 

<blockquote cite="https://www.hassouna-academy.com/index.php"> 

Hassouna Academy offers you free lessons in the technology world to 
follow from anywhere and at any time. And we are always happy with 
your presence and joining us. We always make sure you learn and 
understand, and then you're creative. And that's our motto. 
"Understand = Creative". 

</blockquote> 

gun d&V) \£> 009)1 0 ^P /&& bO/Mll X 3 D 9 

D test.html — □ X 

Hassouna Academy offers you free lessons in the technology world to 
follow from anywhere and at any time. And we are always happy with your 
presence and joining us. We always make sure you learn and understand, 
and then you're creative. And that's our motto. "Understand = Creative". 


(W» 9 )V) bo 9 xa> &99» gx» 0/39 9\ (W oil Jd>V 

cxqx)\ ow9 oiw S/fl)\ u/j ui) 9)9 ^blockquote 

:a]M>\9 ^)\1)\ 09 )!)) (039 4 £jlx)\ 

<blockquote cite="https://www.hassouna-academy.com/index.php"> 
Hassouna Academy offers you free lessons in the technology world to 
follow from anywhere and at any time. And we are always happy with 
your presence and joining us. We always make sure you learn and 
understand, and then you're creative. And that's our motto. 

"Understand = Creative". 

</blockquote> 

<br> 

<P> 

Hassouna Academy offers you free lessons in the technology world to 
follow from anywhere and at any time. And we are always happy with 
your presence and joining us. We always make sure you learn and 
understand, and then you're creative. And that's our motto. 

"Understand = Creative". 

</p> 
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:ob\iH oj^xbb VjjO ,&)&) i&><H xjuq 

Q test.html — □ X 

Hassouua Academy offers you free lessons in the technology world to 
follow from anywhere and at any time. And we are always happy with your 
presence and joining us. We always make sure you learn and understand, 
and then you're creative. And that's our motto. "Understand = Creative". 


Hassouna Academy offers you free lessons in the technology world to follow from 
anywhere and at any time. And we are always happy with your presence and joining us. 
We always make sure you learn and understand, and then you're creative. And that's our 
motto. "Understand = Creative". 


(jfiSoo )\<)/) <j9 O/mH oulu9V\ (wnq g\ 

(pju^l S'te ooqjifcHg Wb O/mH 

•P 

ruby /xjuo yai §99 opb rt ^9)19 ruby ^9)1 • 

annotation 
:oiiMi>\9 body <>><H ^ 

<r uby> 

HA<rt>Hassouna Academy</rt> 

</ruby> 
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gun to a)/>dJ\ X 3 UQ 


0 test.html 

— 

□ 

X 

Hassouna Academy 

HA 





c \axil Hassouna Academy b&ti ol ii>V 

.HA V&jWaM 

ojW ruby annotation 

£ f)SdM V» 4 (jWiWVl OpjM Oo\> (j)\ G/bCkS 

(wm) q*\ s)oxH J\ ojVw^ Vuul S/& Olum» 


:^\H\ dl&H ofis ^ d\i»9 4 
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word break ab^) 009*0)]) c$Vax)\ d/\x) wbr ^9)) • 


:txj&s>\9 body <>>]l (j9 i$\ g 3 o\ 


<p>This Is 

MyLongTextAndMyLongTextAndMyLongText<wbr>HereWillBreakI 
fReduceWidthForWindow<wbn> TnyWindowResize.</p> 


i^axaudl b’x 9 \) /uli) (p 5 0D9 dXm)V> VaO oSaxdl /&}&) 


j . 


Q test.html — □ X 

This Is MyLongTextAndMyLongTextAndMyLongTextHereWillBreaklfReduceWidthForWindow 
TryWindowResize. 


This cxaI)S\ (p$ p (pju<*)\ d>b f $S\ do bo\jo <pj $)W)\ (j9 

xajujo o'o ci)S X5) (W 4 09W» (W Is cxaJ5I)\ (W cx 9W» (W 
^9 cxil Jd>V 4 /X)\l)\ <31 /&)ax) dfiSg f^)\ gxx) Ol9W» S\ boVxS^ 
boVxO (pj $>W)\ 


HereWillBreaklfReduceWidthForWindow 


0/isi>9 4 l&lx 9 V» ox)9 l&xx) Ol 9 W» £\ 09X) wbr (px»9)\ d>b 

IaO /&}bj cib/sH dxiso xx^ a$9 4 /AW) d)Jb f$i\ )\9>o di&H ^9 

:<jb 

Q test.html — □ X 

This Is MyLongTextAndMyLongTextAndMyLongText 
HereWiliBreaklfReduceWidtliForWindow TryWindowResize. 
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£\ 09x3 xxi? break iIajo C &\9 l&i\ Jd>V 



Internet )9iS\ \x& QA sJ (&&sH dm» 

V ab\m) ooV ofiSg break i>\j 0)9 iksj a) Explorer 


.(PJW9)\ \x& (P^X) 


cxiuwWl g\ c()W)\ 0\»9b» oo cxai itas) address (0JM9H • 

:cxjM>\9 body <>><H ^ o 5 j\ 

This Book Written by Ahmed Hassouna 
<address> 

This Book Written by Ahmed Hassouna 
</address> 

gun li^V) Vxo 009)1 0^)0 /&}&) bO/Mll X3D9 

Q test.html — □ X 

This Book Written by Ahmed Hassouna 
This Book Written by Ahmed Hassouna 


G9i(x) cxawaxi (W address (0JU9H <j9 (W V» o\ b >V 

z>\ (j)\ 4 oiuw9/a)\ 9 \ ci)W\ 9 \ yduVxH OV309I530 WVx» 

.0\>Vxx>Vl o"x& 
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Bi-Directional Override uulx) bdo ^\ • 
:oJm >\9 body <>><H (j9 ><$\ g5j\ 

WELCOME <br> 

<bdo>WELCOME</bdo> <br> 

<bdo din="rtl">WELCOME</bdo> 


:^VSU V) O0q)\ 0>JD|0 0)/MH X30Q 


0 test.html 

— 

□ 

X 

WELCOME 




WELCOME 




EMOCLEW 





(w (w dl&) WELCOME wdiSl cw^ (w o3\ Jd>V 
laid(pj (W 4 /xsxj ob bdo (pjw^l d>b £/>\ Q/» 
rtl oJ dir auol> Jdx& (W <^9 (pj^^i\ om d>ta od\j b/» 
dlaidl J\ oxaxII a» t 5 />V\ (pb Right To Left £\ 
cajJ WELCOME oo£ o\ a» tixx9 cud)S\ (pig 

.WELCOME 
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Bi-Directional c*o3 oV*>\ uixk) bdi • 

Isolation 

body 

<bdi dir="ltn">aA)j Hello bkx></bdi> 

<bnxbn> 

<bdi dir="ntl">buoJo Hello bAux></bdi> 


:^\ d&V) V^ 009)1 /&}&) 0 )/>d)\ X 3 D 9 


Pi test.html 

— 

□ 

X 

Hello “xL-a. 

Hello 





WH9 "cx1xa> Hello o&tf" ak>Jl boljj (W $)WH >9lS\ £ 
Notepad _)\ ^xjoV)/) ,39 o\^V\ oV oV>oV\ £ cx)awiax» 
boVj^ xxi? oil Jd>V 0^9 4<-xxax)\ J\ )WxH o» Vx^l/bl 
oV>oV\ o'j ltr (jli? dir cxx)o\><)\ J&X&9 bdi (pow9)l d>b 
oo»Vx» o^x) oV> 5 V\ d)X 30 (W rtl V&iwio xx^9 t oouVx» 
.(cxxlw dlJb Visj<\/9 (pxx) English cxaJo V&x» 9 ax)/s)\ cxsDl 
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Heading Tags cu^UxU ^ w 


0/xjuo ewgVxxH o)\ill 'fxSdww Tags f w HTML ox) c() yby 
4 ( hi , h2 , h3 , h4 , h5 , h6 ) f9>»9 cxxxa (jx&q 40/Xp g\ 
:cx}m>\ 9 J\j]\ itjjJl o3j\ 1&x 9 cji V» \x& >jj\j oxxwL 

<hl>This is Heading l</hl> 

<h2>This is Heading 2</h2> 

<h3>This is Heading 3</h3> 

<h4>This is Heading 4</h4> 

<h5>This is Heading 5</h5> 

<h6>This is Heading 6</h6> 

:^\ dS^V) 00^1 bMJO /&}&) 0)/>dH X539 

0 test.html — □ X 

This is Heading 1 

This is Heading 2 

This is Heading 3 

This is Heading 4 

This is Heading 5 

This is Heading 6 
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.h 6 yjuoi*) 4 hi (pjus>H $ /p \ o\ Jd>V • 

gl b (WU9H ^)WU (j 9 'fJCxxww (pJ j6\ \y.Or Jd>V • 

h6 hi o» o\ afis (jXxjoq tbr g\ strong 

a)^ 09) 1 &x>q xn> /iw» t)>ij Vjicolg 4Viax>g dxaS Jo>o 

.cxx9Vi6\ )\sp\ 
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Image Tag ) 9 »)\ w 

boluL img (wu^l w jspo)\ cjjo/s) ^9 HTML ox) <>$ 

(J ) l 0 >d^\ ^)V&> GX» 0 J 9 )O s\ (&9 (WU9H \x& CW/^H 

cjq)\ (ii» a) xa-wH cw,aj Paste \&x&y> (psg Copy 

>\u»\ (& z&iax) OVflkH 0\>\u»\ )W>\) o\ V9 t html 
z>\ (jH gif q\ png gl jpg d& oj>diu $‘&\ b)9)o)\ cil» 

cito o>\u»\ O 9 /X 309 cikH )9>9 0 \S o\ xx)9 Otalu»l 

:a)oa>o (W ^\i)\ >9^ 
ahmed.jpg bj^xdl cii» 'f&dwu \x& Vjj\ (pls)\ &» 

<img src="ahmed.jpg" width="200" height="160"> 

d£ft)\ 009H oCxaxo dut&i) oV\ <ps 
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- * J _ 

a) \b> dub g\ dy\ (px»\ bo Vo qx 9) oo\ cxxxil 


.ojqjoil 


fjobxb lx& VjjV 9 tOJSPiCk)\ cibo )W» g\ b)9)oH cibo (pxol a» axxxl 
a 3 d\ia]\ 0009 tdx&mb caSSq /&Vx» d)Jb oViio.H um a» cibdl (pxol 
xb*jd\ \’x& e\ c)b/S)9 t xb>Jo (j 9 )<yo)\ &xj\> &X&9 ^\x>o o\ 

)W» src axjoV> x>\j o\ xW &&9H \"x& ^9 images (px»b 
cb'o 9) Yx» 9 amages/ahmed.jpg o<^9 dnV^Vs ciDl 
09k*) xbudl ^)V> oj^Iq pages (pxwb xb*» d>ta <jfc>i)o 
cxxxxflH src cxx)o\> dxxix (oi) 30 b 9) \ \"x& <jft 9 

(jXsj .. _H boll)' o\ (plxi bo 00V ../ahmed.jpg 
/)oxa) V \"x &9 4 0 \)WH ^ 9 b bb?\/» \ 4 up 09b> cib*l) 
cibo S\ flxMxal xd? < 36 s bb?\/» u>o d) 4 Jm 9 ) 9 jo)\ 

4 SlyVl o"x& />\ J\ u\jO g\ 9 )xx 9 &}m g\ 09)0 9I 0)9)0 o^O 
dxsxaxH aaJbjV c^ow\)o xd? V&xjoJuu ogb o\ x)V OlxwbwVl ox& d)9 
(xxxj gx 3 Sq 4 Mac g\ Linux <j\ Windows ci \o 

.Obbdl 'flxSdxwl ^9 b/WO <bx>\ t)x>o Wxxixx oV l&di? 


4 G09H boouo b)9)o cib/s) img (0x09)1 VboxMwd lxj\ ii>V • 

.£ 9 *x>jo a) cxixx) (&XB 9 H \x &9 

ahmed.jpg (oxwb b)9>o cibo cib/^ oJd> oj\ Jb>V • 

cib/^ (W9 4 X9ll\ l&x 9 CaXV) (jxH C09U a>i)o o\ 3 oo cxixfl) ^ 09>9a}\9 
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l&l&xoo $)/i> img /ooxsl) src cxxool>dl odxxul90 009)0)! o"x& 

.0)9)o)l olio ^ 

200 X >lx)\ Qlo (p>C*) 00900)! (p>> /xxso (po ail &>V • 

4 1)9)0!) dwdlx) I6O9 oo/sl) iWxo 200 cfe ^5309 160 
(039 4 a&lidl odxflo l&lx5»9 aiolxal) ox>9 ^ Pixel doi^xx)l9 
4 1 &) 200 ooxoo>o9 width auoV>d\ &)/i> <*& cb/xH .to 
cooxoo >09 height axoo!>dl &0/)o 1)9)0)! )djoo (W oj\ 1 a) 

.img yooud) lx& do 9 4 1&) 160 
Vx) ui/jjVl gx» 0)900 )oolo Src axool>dl £ £x &9 9) do! (pl^l • 

.Cvi/jjl 09>9 Jo/jb 0)900)1 >&)oo c 59 W) cilxdl (poul a» 

:a)o&>d (oo (JIDl 09DI cDo oV\ 

<img src="ahmed.jpg" width="200 M 
height=" 160 " alt="Ahmed Hassouna"> 

cxxool> (j&9 alt oxool>dl cxd^ olo 01)9 IooVjoo $oW)l dx» 09))! \x& 

\S\ /&)ax) 00900!) Alternative Text doxx)l cool)! I&x 9 2069) 

.00900)1 coo/p £ d)o^ £l ux> 

:cxjaa>o (00 <3) loll 09DI c* 55 o oVl 

<img src="ahmed.jpg" width="200" 
height=" 160 " longdesc="ahmed.txt"> 
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oxjo\><H ooox> crnsti fx>d longdeSC ox)io\>o \’x3 >xd) 
j>\j b>$> 1x0 9 4 V alt (ji) ooi \n o'j 9) ux>o Vw/i alt 

.gxxxjo & 9 <*a] Jdj\) dl» £/>\ (&x 9 £009 o 3 j\a)\ 0009 ^ cii» 

:aiofl>d (W 09$\ cifi 

<img src="ahmed.jpg" width="200" height="160" ismap> 
bdJo\> ilxwl (OU % Ca 5 & <jXH ismap OpoV> )s 3 l\ \’x 3 ^9 WJC*H 

5- % 

Vxx 9 4 l&W/j V \jj\ (jXsj l&09>9 'fx^g l&W (jXjy l&09>9 oV l&) 

0x3 fxSoj^ 4 tog Wxb ismap= "true" oo£ o\ o» 
server- £\ Server J baozi' o)^ol\ m>o xx^ auoWI 
Server J 4 side image-map 

dxAJtUg Server f^\ JoxaaxH 4 l&)^> o» 

&*»/) OP />\ ulx)" <j 9 6)^9 \i& CXJXx) ,j 9 0390930 Client 

.009.H 
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:a]afl>o (W ^\i)\ xsi)S\ cifi oV\ 

<img src="ahmed.jpg" width="200" height="160" usemap="#ahmed"> 

Vail ^ 1^)1 o»9 usemap ^9 oxxx> ox)ioV> >9^ \’x& da>o 

. ‘ t _ 

lap axl^ <99^ OflpH dp # (jXXJOQ # OJO^JD \ui OAp X>\j 

xxi? cxxjo^H ox& 'fxSdwxjg <, £,>1 f 9x139 cxxwjIajo &» oAU <\xw o\ xx) 

client-side image- £\ Client J a»>\>o o^l wxsx 
o» <Vm\ ds99 Client J 1 ol»9lx» <Vja^\ ^xx opo 4 map 
dxxxxH 9 Server f^\ ^aiuo ^,id JimsxH (jXxa}\9 4 1 &H> 
php J\ />\ u\ti p 0^9 \x& cm) ^>id\ p osxtx9» Client 

USemap cxx)io\>d\ &» d»Vxxx $9x1) ai)9 4 dp on ViyJi VjjO 
(WU9H9 map (0XW9H Wx^ u\ 33 l\ \x& p cxill <U) o\ dxxoixlV) 

.xx) W9 area 
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Comments oVsuJaiH botf 

m • 

on op>\> oo£ o\ aAiloj oa)^ HTML ox) yby 
6 b & z&iw Vq V\ oxjaip. o)Vm>\ (pb V Lag 
><$1 ciA efe am)9j ojo^b» d) 

:a)cvfl>\ (W ^\j]\ 

<!--This is heading for html--> 

<h 2 >HTML Language</h 2 > 

:^\iH dijSiiVj \jiO 6 b & (pb <b/^H 

0 test.html — □ X 

HTML Language 


cbli $\ta6 dax) Jd>^) 9 t $dsjb f \b\ d&bbb "xflb ><$\ o\ Jb>^i 
ab»^ (W cmsi $bxb\ (W — abate (W ! bote (W < <b\u bote 

.$db lbs 9 > bl&j bote (W — 
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Link Tag <^9 


Ox>\ 9) \SV» lekixsi dlxiu (p]\ tOX>\<) 0M30 ikxj Cd\ oV\ (3 x> 

4ovi/ jjV\ >9>9» />\ & 99 » <jH l&xi) ch\ <j\H tojuoH on dlaxWl 

OVgWll ox& d 3 4 ^&xw dflxw o\ C43M9 $>sdo o» /jJ \ oW\ 9) g\ 
cxxl>ta .M93 <Vmi\ o» £xU a JdjIq/JI (w»9 < 3 jo l&b- /jJ lg 

.CXX>)1>9 


:a)afl>\ (W body /JoxxH d>\> >9^ cx)\xb (&9 

<a>Nothing Link</a> <bn> 

<a hnef="#">Empty Link</a> 


dkw^Vj bc*a)o)\ duuau X539 


D test.html 

— 

□ 

X 

Nothing Link 
Empty Link 





oxjo^U i&xio 09x3 a (W139H d>\i cxoi 1x5309 V»xx^ oil Ja>V • 

.<<jX» s\ u£*i (&) href 

# cxxxxflH a (W139I) href ox 3 iO^H i&xio (pi \»xx^ oil Jd>V • 

.o>juo)\ ^axa> <j3Jtfo3 h\rf U/&& 
.0Sfi3o)\ CXJXS3 X3033 Vjj\ oJdW <jX53 # /J0/)\ 03^ • 
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oVJaU 1&3 (Hyper Reference) ,href amWI • 
W)\ i)U\ Jojuioil (uH uWx)l W/j £"x)\ 

Ca&w oChsooH cb/P <Vx)\ Vxtea 9) oil dfiS # 

.b£*fi),a)\ CAlkSU 

1)9/ill br (pji^l VxaxSml ofixig t/ jm i)>b V a (pju^H o\ )d>V • 

.ibV\ Jw\/J\ «j /Jdju 

.Hand w J\ ougWH dlxsH Jm\/U oma) ail Jd>V • 
:a)cvfl>\ (pS body yJiaxxH d>ta ^VxU boVib (pS 
<a href="http://www.google.com">Google</a> 


:^\1H d5daa)l) Wf a>iuo)\ duuau xjoq 


r l test.html 

— 

□ 

X 

Google 





i^VxH dldaall) Wf Jwl/H JdjuaII (W 9)9 
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.oudl oikfli ^9 d>9> &99» ^i9 (W \»ld dbJuo $1^\ o3\ Jd>V • 

.Google oaJo cikH qjn\ on /X3u title oWxxH o\ Jd>V • 
title ol^xH (WW9 otf \S\ cikH (pjul 00/^ (d) oil (plsU <*oa 

.0>juoD o\9X<? £\ OQX) 0)\9 

</a> 9 <a> ow a (pxw^l d>\x> Google oaJIH boljj (w • 

OiOQ/XJO 0^ 

9is VjjOq .d>9> &99» Jdj\) href oxjo^I Jda& (W • 
hypertext OlskH daxi d<p9)9/> 9&9 http _) \w ail 
https s dA co\i 9k transfer protocol 
world ,^9 www (w //: <w Secure ^ 


^wal V&xjd (d .&9\9 j\H $\ (j9 ox 9 > 9 » , 3^9 wide web 
JV) f\& {s mA) c9/jg V» \’x &9 .com &» google 
&9\9 aD ^>9 bu> 9 H umx) .com J\ a.^V )9 .Domain 
.org x> 9)9 oxlmU oV»x>^\ &9\9 j\) .net Vxcol <^li &9 .cwj\mH 
q"x& />\ J\ .ouo^l &9\9 j\D .gov c^\i &9 ox*^ /X*^ OWxxaI) 


.OIxaxwjxH 


:a)afl>\ (W body /XoxxH d>b ^\x)\ >9^ boVxb (p9 

<a href="http://www.google.com"> 
<hl>Google</hl> 

</a> 
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:^\1H 1x0 dmu 1539 



/Sy hi (&w>9)\ Jm\/H b&tf ^9 y oo\ Jd>V • 

.ux> ti/jig /VpQ dxaS 

i)>ta bo\ji ^99 ha.png obmx 9x9) ^*>0^1 

:oJm>\ (w body yJohH 

<a href="http://www.hassouna-academy.com"> 
<img src="ha.png" width="160" height="180"> 
</a> 

: ^ViH dii^V) 1x0 /&}d3 o>&)o)\ i)mu x»9 

D test.html — □ X 
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Jdj\) u>dJol V&j^Q Jm 9 o) 9 Jo Umx) eX»V»\ ^xH ojwdl 


y 


.a>)\> ooiulg j»g\ d>\x) ox)>s>» oJSPcdl o\ Jd>V • 
.a (Oja^H d>ta ojspcx) cxojdl dlxuxal (W oj\ Jd>V • 


V Vx&g Hand u d<£*u ayxjyV) oj^xcdl omd o3\ Jd>V • 
d>ta img (wu^l oV \x& ux> dig t ox5x\y\ oj^yi £ ux>o 

.0)SPO ^ J&>\) <5)1 oW> ofi)Ji 9 a (Wi^H 
Jdj\) (ji^ laxma yj&x& (W href cxx)io\>d\ o\ Jd>V • 
hj&p'o \ bj^wi> a.9^0 w hassouna-academy.com 

(jxH oj^dl ow^yV) Jaxio <*) axil ca&w c9<*w £"xH<) 

.Jwl) 
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VjjO 0)SPiCk)\ JdJUaII U/> 


Hassouna Academy Home Page - iLoj^l^l 




Welcome to hassouna academy 


Hassouna Academy offers you free lessons in the technology world to follow 
from anywhere and at any time. And we are always happy with your presence 
and joining us We always make sure you learn and understand, and then 
you're creative And that's our motto. "Understand = Creative" Register Now 
at the AcademyX To be with us always 
Show Thaks Words V 


Hassouna-Academy © 2018 

► 


f 




1 


unit) (j9 bd9>a> (W 1x0 9 
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axax&H 


https://www.google.com.eg/images/branding/g 
ooglelogo/2x/googlelogo_color_120x44dp.png 

t59>w img )<j)o)\ (WM9) src axio^H d>\i ax&9 (&i 9) Jm\/H \x&q 



<a href="http://www.google.com"> 

<img 

src="https://www.google.com.eg/images/branding/go 
oglelogo/2x/googlelogo_color_120x44dp.png"> 

</a> 



I’l test.html 


html — □ X 
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_H o)<*)o)\ Jw\) ^ l&i&xx6 (w img /xoxxl) src Jd>V • 

.ui/iiVl iIajo £’x)\ Online 

.height oxxo^l V9 width cxxjoI^H bub cxil ii>V • 

t 

.cxxsxx]&H Via^Vx) \j 0)<*)o)\ OQ/P (&n \’x&9 

d)Jb daxxi Jw\) c^xJiol oj^xcdl ^ J&juicdl xxi? oil Jd>V • 

.d> 9 > & 9 <)n J\ /&lx» 

img /JoxxD src cxuoV> on 09 /sdH »l9 ^ &&& ^ • 

)W» j>\j ,jxH ,j& src oxxo^H o\s .a ,00x3d) href oxjo^Hq 

^99/» oj^o ciy ,xwlxn Jw\) q\ an 0)9x0 ciln 

xx^ cxdl uWxl) o\ 3 jo "x>\j <j& href axxo\><H V»\q .ux/xWl 
0x9x0 9I 009 cxMxo 93 oV 3 jo.H 1 x 3 o'j <\9>w ^ JdjuaII 

.,M/)\ JdJUaII XX^ ^XXfi) <<jX» &\ q\ 

:cx)m>\ (W body /XoxxH d>ta \ a)\il) (&9 

<a href="http://www.google.com" 
target="_blank"> 

<hl>Google In Another Window</hl> 

</a> 
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dXjS^Vj VaJ a>juo)\ dxijSw jjdq 



:J\j]\ d(&)l) 1x0 V&M 9 xx) !cxui\ ajjg 
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J&VsoJlg oxjx> o"x 9li (j9 ^.xs) Jwl/H dx> £’xU o'\ b >V • 
cxaxaH a yJohU target oxxob^l bb& axUoV \ 

.oxxx> o’x9li Jm\/H ^xi9 c9x& o\ bs\xx»9 blank 

4 0x9 Jw\/U ^.’x 9 (jxb £xH c9x&H >x>o a /joxsd) target cxxxobiAl • 
oixiu (j9 Jw\/)\ ^xx9 (jXxig _self axxxaH <j& l&) axxol/j^Vl oaxsIIq 
t oxjx> o’x 9 Vi ^9 ^xx9 (jjjtj blank cxxxxaH 0’x>\ 9)9 4o\ix)\ 

)VJo\ o» $ \ a)V> ^9 l&lxx» parent a/\xaH o’x>\ 9)9 
Parent ui\ $>sbph\ ^ i99>» a>Juo)\ uixiu ^ Frame 

axxxo 09I9 top axxxflU 0x>'\ 9)9 ^Frames o\)li>y\ ox& 1$ 
o\ duw bo J^V\ )U>y\ (j9 ^xiax9 parent Jb 

bocxxa^ cxaxnI cbJj qj owxxixb xxx> Frame )U>\ <\ibb 
(jx&fljj 199x09 xUxVl (j 9 ^lax) a /xoxxJA target cxxxob*!) 
t 9 /si) o\ xx) oAH <b» o\ xs) W9 Frames o\)U>V\ ^aiuo ^ 

.iframe /xoxxH ^ 
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:a)afl>\ (W body /XaxxH i)>ta o)\ll) (pS 

<a href="ahmed.jpg" > 

<hl>Open Image for Ahmeck/hl> 

</a> 

1x0 /&}&) aXsuoH dmu xsiq 



dSdSijVj 1x0 V&M9 xxj !cxuj\ gift 9 


Q ahmed.jpg (1089x864) 

— 

□ X 



Q 




* w 4 




L | > J A 1 
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href oyo^D oooxxoSoq ciy oax9 'fl&ojul xx^ oil Jd>V • 
/WiVwo Jdj\) q\ S)\&> cilfi] )W» o'j S\ a yooxsl) 

Jaiyi xx^ cikH \"x& cbt» 


><$1 cu9 oo^Iq pagel.html (pxw\x xxx> cil» (pi oV\ 


:oii)i>\9 ^VxH 


<html> 

<head> 

<title>Page l</title> 

</head> 

<body> 

<hl>This is page l</hl> 

<hl>Welcome to Page 1 Shearts;</hl> 
</body> 

</html> 


(pxiyi d>\x) This is page 1 ciy\ o\ Iajq 

.lM\ ;») (w Welcome to Page 1 ^ \SpA s&w t hl 
:o}Di>\ (oS oyaWVl cfc>ij|0 £ JVxH boV3i) (pi oV\q 


<a href="pagel.html" tanget="_panent"> 
<hl>Go to Page l</hl> 

</a> 
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:^\iU dSoalV) 1 x 0 /&}w cxxboVl oC*axd\ dxxid xjdq 


Q test.html 

- □ X 

Go to Page 1 



iJVxH d)JadV> 1x0 A &i&) o£>oi)9 JmI/U dxxxcdl xx^g 



fV&stoq d&>w d)Jb <ix99» Ol><&)o ox) daixH o9\ e6\ Jd>V 


.cdU lUoiu 

^\ 9 _parent oxxxaU ^ c\&> target wWI <a\ ii>V • 

t cxxxxaa» 9)9 <ji> cxxboVl ^9 dx9 gx» Vi/i 1x0 ^isu 

o\ xx) Ixxxi) cxdx? c 9 / 5 xi t 99 >» (pxxwaxH f^isiao o\ Vxcol Vj>J Sg 
FramesetJl V»V aframe \xxi Wx$* oAH 

.oxoxaH on ojV cx>yid a) 
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(W body ydoixH d>ta (JViH boVji (&9 

<h3 id="top">This is top</h3> 

<a href="#pl">Go to paragraph l</a> : 

<a href="#p2">Go to paragraph 2</a> : 

<a href="#p3">Go to paragraph 3</a> 

<p id="pl"xb>Title l</bxbr> 

This is subject 1 , This is subject l</p> 

<a href ="#top">Go to top</axhr> 

<p id="p2"xb>Title 2</bxbr> 

This is subject 2 , This is subject 2</p> 

<a href ="#top">Go to top</axhr> 

<p id="p3"xb>Title 3</bxbr> 

This is subject 3 , This is subject 3</p> 

<a href ="#top">Go to top</axhr> 
<brxbrxbrxbrxbrxbrxbrxbrxbrxbr> 

aumj (pw bdJoV> id bdJo\> V&) yJoVisil dew o\ Jd>V • 

on *\uH dim) Ixisg t VisH> gx» , 40 x 5)1 

OVxm» Visjawti (W yJoVxsd) href cxxxoV>d\ o'\ Jd >V • 

um (j9 Vis S/>\ 

(jlaw) 0\/9 dax) o 6 Sq oC*ft),c>)\ />\ £ br i>V • 

.^9)09» j>\ m iuo)\ (j9 
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:^\1H dSjS^Vj 1x0 Ah dmu wqg 



ifijaH Ah Go to paragraph 1 h\^ ^ h*h\ o9\ 

gva\ 

□ X 

Go to top 

Title 2 

This is subject 2, This is subject 2 
Go to top 


0 test.html#p1 

Title 1 

This is subject 1, This is subject 1 
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dl&lV) VjjO Go to top ^ (W 


Q test.html#top — 

□ 

X 

This is top 


▲ 

Go to oarasraph 1 : Go to Daragraph 2 : Go to Dara graph 3 



Title 1 

This is subject 1, This is subject 1 



Go to top 



Title 2 

This is subject 2, This is subject 2 


▼ 


Go to paragraph 2 h\^\ ^ Jmu&U ^ o 9 \ 


Q test.html#p2 

— 

□ 

X 

Title 2 

This is subject 2, This is subject 2 



▲ 

Go to tOD 




Title 3 

This is subject 3, This is subject 3 




Go to top 




▼ 
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g\S)\ dlJ^V) VjjO Ah Go to top Jojuicdl (W 


Q test.html#top — 

□ 

X 

This is top 


▲ 

Go to paragraph 1 : Go to Daragraph 2 : Go to oaragraoh 3 



Title 1 



This is subject 1, This is subject 1 


▼ 


d£&)\ Ah Go to paragraph 3 h\^\ ^ h*h\ ^ oV\ 

gva\ 


n test.html#p3 

— 

□ 

X 

Title 3 

This is subject 3. This is subject 3 



▲ 

Go to too 






g\j]\ dlJSdV) VjjO Go to top JdjuaII (W 


0 test.html#top — 

□ 

X 

This is top 


▲ 

Go to oaragraph 1 : Go to oaragraph 2 : Go to oaragraoh 3 



Title 1 



This is subject 1, This is subject 1 


T 
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.«£/>! bsioo 3 s ) dlaxiVl 09 ) tojuoil um \’x& do b\ & >V • 

ax)o\>d\ d>ta ydoxsdl id ^ <\xxH dx9 # Jd>V • 

.a (oju^ld href 

.top (MoW) (XXXAwd (WQ 0 >JU|cd\ Jd>V • 

d&wxx) 0/39 do iW\ Go to top cxxl^ uyb Jwl) Jd>V • 

afiSg toxl^ Jojuicdl xx^ toducdl ^\ &/W dlib dlaxiVl Ixx^ 

Ca&W o\ 1&\x5»9 ihref CXX)| 0 \^\ <j9 #tOp CXAX9 X>\j CX)V 

ouiu ^9 axl>ta &x&\ 9 » ox) dax’xH d&>id\ on ^xxjoI oil Jd>V • 

.a>juicd\ 

<*oo 4/Jox^ oC>o IaO WxJO>d o\ obi id ax)o\>d\ o\ Jd>V • 
o;xajo ax)oV> W)V 4(pjuV\ oixiu (p&) oj/xcd^ fx^ oV^\/» 

./XxxP do /wxj 
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:a)afl>\ (pj body i)>ta ^\i)\ cx)\ji (&9 

<a href="mailto:mohamed@gmail.com"> 

<hl>Send mail to Mohamed<hl> 

</a> 

03d^Vj 1x0 }&& oc*a)o)\ dxx&j xxjq 



g alb Va) cii» q\ Jdj\) x>\j (pi href ax)o\>J\ o\ Jd>V 

X)/) dWV CXAX9 <j&9 CXfl&>CO CXAX9 u\>\ O/aH o’x& 

(j9 9 is Vjo email ^b^xH xx/x dxw,x) Jm\/H Jdjxo 
^Q/ xlxlVl W/xH olqx^ (px : (px mailto cxaJIH bd\ti <pfxx Vq\ oo£ 

.dn\i)V) cxxl^ dlx»)V\ (pxx c 9 sxx» £xU 
W/xH <*$ ^xxa) i99xa click Jwl/H iMU<x)b oX/MH xx^ 
d)Jb a)Vx»/U dWV /&\> osibg <3x oo^*H ^xol/bVl ^b/ixlVl 
.href axjoV> ^ ^9/xulVl w>j)\ J\ /x»lx» 
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(W body poxxH i)>ta >9^ bo\xb (&9 

<a href="ha.png" download> 

<hl>Download the Logo<hl> 

</a> 

:^\1H 1x0 pa}w ofeiuoH dxx&j xx)q 

D test.html — □ X 

Download the Lo go 


oqwq a poxxH d>\) download oxjo^I a)\o • 

dufcX (M) l9<)W) Jw\/H J&X)ia)\ XX^ Od\ c()S (jX5» *CXXXX9 

9*\ 0)9)0 cii» o'j <W>w o'j S\ href axJo^H (j 9 cikH 

./>\ cil» £\ <)\ xxxxa» q\ ulx) cil» q\ ^ cil» 
daxj V9 client daxj chn cikH ^isu 0)/>dH xx<? • 
(Jl olU Ooicvio (j9 c&\/j>\ xx) dig ^server 

Ld$\ (OXAXO) Olx) 0))U l 0W)\)> XX) />\ utf ^9 00^1 0X0/3 

\xis (tx&fl) t99>w HTML G09I) fV\ oxDV) Ixxj (jxH cxuwlwVl 

.olU doioio \x&- <ix» iIajoq 

\xx> p) 0^9 1 Server Jig Client J\ f aV\ dxmj V • 

.jlxx»\) l&x 9 cvxxxwVjo C 5 x> u 9 <*H (j 9 HTML cxxDl Jix? 
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dx» a /xoxsD download oxjo\>J) cxxxp ofrupSi oiw • 

gun 

<a href="ha.png" download="logo"> 
<hl>Download the Logo<hl> 

</a> 

JdjuaII xx^ ^9 .ha.png 9£ alx/a>o )\,j\)\ cilxxH o\ olxs» Ix&g 
dux>d)\ (W S\ Jogo.png (ojuVV) cilxxH dfl>o duy>ol\ oxlxxg 

(pjul) 


g\iU hreflang oxjoUI "zx&y 

<a href="http://www.google.com" hreflang="ar"> 
<hl>Google<hl> 

</a> 

.Jw\/JV) )9>9/d\ xxmxdl as) hreflang cxpo^H • 
cxpo^H xxx>o on oi&Ax) href cxpo^H xxx>o o» xW • 


.hreflang 

a /XOXsH G&XXP <\xj\ /Xp d(&) /j^ o) OXXi^l ox& 
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(W body >9^ bo\ji (&9 

<a href="http://www.google.com" ping="http://www.hassouna- 
academy.com/pagel http://www.hassouna-academy.com/page2"> 
<hl>Google<hl> 

i>\j ^89 pmg btip\> ^9 oux> ax)oV> oolx) (W • 

O&W) />\q h}) ^ GXX) dxMU iw\9) U\>\ 9)9 tO>X 5 X» .M9) 

^ ^\9 9& Vxo space 

,ji) a»9lx» (&&xH dw/i) Ja)\9j ox^ 9\ Jdj\) j>\j ping oxio^H • 

.Jw\/H ^ bti cdVx f \9 fx>ojivxH o\ o)V> 
om>ojiuxH u\bx& &ux) o\ \i\ o)V> ^ xxsu ping cxxjo^H • 

M^\ > 
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:o)ofl>\ (W body i)>ta o)\xb (&9 

<a rel="" hnef="http://www.google.com/"> 
<hl>Google<hl> 

</a> 

>x>o (j&9 relation rel Wx»\ ox)x> opoV> x>9) oj\ ii>V • 

Ov&b «?xU UXWVAH9 XUWXJfcH OW 09^)1 q\ JoVuWl ^SP 

cxxH 

/xaxxl) rel oxjo^I w»o &» oim) href opo^H wx>o on xW • 

. 0001 x>ojj) \ xxi? a 

o 9 ^<? >x>o) xju Wx 9 S/>\ >)oVx<? ^9 rel oxjo^I < 3 ibVaj x 9 • 

W) cxayoSo ,jxH (jxxa)\ a? ofllx>co (opt) 0^)9 4 cxxx» yoox^ flxMxal 

.a (^9)) (j9 

09 /jufc) rel oxjo^I Wx>lj (jxH (&xa)\ a? ub oj 199^ loxxil • 
oixxj 0)9 t o)/>ol\ dxxw osib V9 t oxxx 9 txP Jafl 9 0\»9lx» 

Client J\ 'f9&i»9 009) \ &*»/) c9/xm Wo*) (&&9 o» 

{5 t 

xx) V\ W&aj a) Vjico\ Wa*)9 V\ cm) \x&9 4 Server _)\9 

0W))W)9 u\>o\9 &X)oW»9 OV\>J09 (P9/ibV\ $)9 m 1) \xpr ck &9 

(sill search engine optimization - SEO _)\ 

O/Xp ox& 1)39 40MH O'j/^oo (jx &99 cxx»)>d dxxx) 

4HTML (jli? VjqVjoj p /j o\ oV\ ca>09 40 wx^ OW\d W9 \x> 

.oDl dxcki) \xx> cmuwVx) (jX> 
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t _ t j 

Va) gx» wxsU rel dxxo^l x>\j ol gx]ju • 

oc*a)o)\ dx» xxxmD d)w Jm\) /ixj) s\ alternate cxaxaH o 

.cw\>/jd\H q\ 

.xdwudl ci)W <M) /9<)3 s\ author daxaH o 
.bte>j jo o)Ui\ Jw\) s\ bookmark daxaH o 

<uH jlmH xnwudl (jU t Jwlj £\ external daxaH o 
mxajoll duo 4&9<yd\ om on <;> cxixx) href ^ 

.OX^WH XUMJid Jwl) £\ help CXAXflU o 

.yidUg &x)&H S<ja> OVjo^Isa) Jdj\) £\ license daxaH o 
.ox>oo9 dx)\>J\ bdudwdl £ $)WH xxxwudl S\ prev cxj\xaH o 
.ox>J09 dx)\>J\ bdwdwdl £ ^\x)\ xuuuoJl £\ next cxxxxaH o 
duo 4 ou/isiuo ^ xxxwuo J\ JdjIq) S\ nofollow daxaH o 
.Mq/H V (jX> cxjoxaH ox& 'fxSduu d>^>9 4^99 uo 

.m /Afijtdl £*d\ ^y\x) ^9 d^9x/d\ 

dU)\) ^axovxH f 9w V\ JJm 3 £\ noreferrer d&uH o 
.du\/)\ \’x& 'fxSxuudl &ul \S\ HTTP &>■/» om\j 
cibl/sxxttl sW V £\ noopener daxaH o 

.window.opener f\jc*u»V> 

.xxxuudl olgoV dul) £\ search cxxxxflH o 
xiiwxxd) cxxm’)) cxaI^ q\ cuo^? £\ tap dxxxaU o 
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:a)afl>\ (W body d>ta ^\i)\ a)\ji (&9 

<a href="http://www.google.com/" type="text/html"> 
<hl>Google<hl> 

</a> 


: ^ViH d£»d\) 1 x 0 /&}&) oMxail dxkmi xjoq 


Pi test.html 

□ X 

Google 



.S'te tkm d>sPr ov&b Jm\/H JojuicJl xx^ • 


xumH >x>o a yjoxsd) type apo^H 
.type apoV>d\ wx>o o» aid'd href cxxjo^I x_)X>o o» xW 
.a /XoxxH eiW <Vxj\ /Xp d(&) dxl^ /j^j a) oxjo^I ox& 


{5 f 

<j&9 a /JicjjtU media (w»l) bpoV> x><*> a (m»s>D cxxwdJV) \/x>\<) 
ucSd I’x&q .media query J\ £<^aj booV> 

CSS \ oolx)" (OXJ Viat>\X)Q lx& CXJXx) l&JbO<*»9 CSS J\ Wt) 

.media query e^^lV) $lxu 
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Lists 


OV^9X09» ovU/i) V&) (wl ^9 iW HTML cxxftl eft ^xxi 

llxX) ^Xfl 9 t(x)9&X» dto ^/>V\ ViSJioJt) )\6\ 9*1 QO>JdO 9*\ guqVx^ 91 
9*1 t\")i&9 t^j\j 9».2 tW ^ 9 X 09 ».l cxj\ 9 /» OVi?9Xft9» ofi\ 
V» \"xis t \’xl &9 3 t2 o^ax* *1 cxjofli* ^x» JaVai i/xxu eft'l 


.cftq&xtt d() oAU dxioio HTML ^9 cxlsso c99x» 
(wWaJV) Ixxi i99W9 tCxxj/ 30.2 - oxj/» /X<?.1 (JX&9 gV^ 9) Vis.) (wWa)\9 

.ul ^9)19*\ /xejjftl V&)9 unorder list oxj/» /xxH 


:cx]m>\ (W body /xoijftl ^)\i)\ ooVilo (&9 

<ul> 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScnipt</li> 

</ul> 


:^)\i)\ d(»x)V) VaJ A isiw bc>juo)\ dxx&j xx)9 


r 1 test.html 

— 

□ 

X 

• HTML 




• CSS 




• JavaScript 
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aW/» ^ buwV9 (jjjtng axx/jo ^ buwV9 iIax) 111 (wu^l 'flxXxal (W • 

.\’xl&9 t ( C9 bg a c^ixx) ) g\ ( 3 g 2 g 1 c^ixx) ) £\ 

(px»s>H d>b list item cx/wlij dax) li (px»<d\ flxxjul (w • 
ouaib li iW (W ux> aajlflH >JioW o» /)ox<? d)S I’x&g ml 
.JavaScript J CSS J s >b HTML 

.bdxflj /xxx) £"x)\<) • /jajl) oxxXo /XoVxsJl <a\ ii>V • 


:odxfl>\ (W body /)oxxH d>b ^\xH x<j^ oo\xb (pS 

<ul type="square"> 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScnipt</li> 

</ul> 


i^lxH dSJSxiVx 1x0 j&k* oMxdl dxxxax xx>q 


0 test.html 

— 

□ 

X 

■ HTML 




■ CSS 




■ JavaScript 





xxx>o (WQ 111 (pxw^i) type (pxw\) ox)x> awo\> c^\x& o\ Jd>V • 

s« * 

.bdxfl) on Vx) ■ &)/» axglxxH U><x)iO^ tV&) Square cxxxxflH 
./XxVxsJl ^ • bdxflxl) disc type oxxxbd) cxxxtxl/bVl cxxxxaH • 
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111 (wW\ <39 type ax)io\>Jl disc oaxaH o)/>o (W \i\ • 
.yJoVxsl) • ojbai ui'j oo> till _)\ (j9 o)/>o 6 q\ di» kjlxH 

:a)afl>\ (W body /XaxsH i)>b ^\i)\ bo\ji (&9 

<ul type="cincle"> 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScript</li> 

</ul> 

:^\iH d&V) 1x0 /iaja) dmu xs)<) 



ul $ type oxjo\>J) circle om)\ xx^ Jd>V • 

l£) o b^/i» b/j\x) yJoVxxH 

ojux9 o^xjoI 111 /Joijtl) type bd)o\>J\ ! \xOr anil • 
as) ^ W&99 l&xl^ o)/M)l ax/aisV a$9 ^deprecated 

.(wusM \i&) V&>/& (w html 

on d)S value ba\p c^om) data (wus>)\ flx^l ah) • 

:^)\i)\ ‘li yJoW 

<lixdata value="l">HTML</datax/li> 
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f >>d\aj c 99 W) Vising tOrder list cxxj/xdl /XiVxsil (plsx) c 99 W) oV\9 
cwii^ axjyjdl yJoVxxHg till (pjwsJl dx» li bl>\x) Vjicolg ol (pjal) (pj))9 
t\ji &9 t( C 9 bg a ) q\ ( 3q 2 q 1 ) osito t \»Ia) oxj/» /xsil 
.ofllS>oo (&x9 x>\j gu)q 111 (pjusiil dx» type opiol> l&) Vjicolg 

:a)afl>\ (W body /XoxxH d>ta ^\i)\ bo\ji (&9 

<ol> 

<li>HTML</li> 

<li>CSS</li> 

<li>HavaScript</li> 

</ol> 


:^\iH di»dl) VaJ z&iw bc^xiil dm)) jjdq 


| r ] test.html 

— 

□ 

X 

1. HTML 




2. CSS 




3. JavaScript 





^Valj dim) 3g 29 1 <jA9j ouWl ^ l&xxj/j (W /JoVxsdl o\ Jd>V • 

.Ol (OJW^H (j 9 Vi8JtVD9 xx<? 

(3X3009 tJofl99 1 ,3& ol /XoxsJd type cxx)M>Jd cxxAol/bVl oxxxaH • 

.f\9)V\ fIxMmV) cxx’)/» S\ 1 ouaiflU 
.111 dx» cxjajx 9 urn) ol (km9H (j9 lx& type cxx)iO^>d\ Icxxul • 
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(W body ydoixH i)>ta bo\ji (&9 

<ol type="l" start=" 7 "> 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScript</li> 

</ol> 


:^\iH dXiSyiVj 1x0 /&}&) bM)o)\ i)mu xsjq 


Pi test.html 

— 

□ 

X 

7. HTML 




8. CSS 




9. JavaScript 





o\ ol type 1 oaxaH (W • 

(jiol/bVl I’xag 4^V9)VV> yJoVxsJl 

oVU\ ^ (p9) j>\j ^89 start awob- f \ 6 ^\ b >V • 

&)W\ /XiisJl on u\m 7 oaxaH xx <?9 tOolxxH 

.7 (p9/)\ 9&Q 

ol type cxxjo^H cxoxxaX oqxj $)W}\ ><$\ cx)\jj (pi \S\ • 

.(jii&l/bl d)Jb ^VsjV\ iIajo c99>» 
u ;3 t59>w ajwVflU t)>b cSq £\ ^9 cxx 9 \x&\ yJoW &&<*) u /\9 \S\ • 

l&i&xio (W VxO ol owVaU iWkxi om £ix')<) ^yxb Oiwxx ojuVaH 

.dx 9 GX» 
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:a)afl>\ (W body d>ta o)\ll) (pS 

<ol type="a"> 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScript</li> 

<li>D-Queny</li> 

<li>Bootstnap</li> 

</ol> 

: ^ViH OiiSyiVj VxO oMxdl Omd xjdq 



c^xjoI ol ^ type a o&xflH opmpSj Jd>V • 
.lower case o/xsjo isgp- a-z ou/» yjoVudl 
l&ui/j (pw li (pm<)H $),i> gx^ /XiVxsJl b\j) o)V> ^9 oil Ja>V • 

.(pjox»9 dim) aa)WH yJoVudl &» 
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(W body ydoixH d>ta bo\ji (&9 

<ol type="A" start=" 3 "> 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScript</li> 

<li>H-Query</li> 

<li>Bootstrap</li> 

</ol> 



^xjoI A cvuflH ol type Jawo && oj\ b >V • 
(jjValj d)Jb UPPER CASE o^xp t5Q/> A-Z yJoVixH uw/j 

.yJoVxxH dll 

o» cAw 3 axuaH ol (pju<d) start Jd>V • 

.oxx) o» c^j/lH dwdwd (p$ C tS/> Vxia W c^\iH ydoixU 
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:a)afl>\ (W body d>ta o)\ll) (&9 

<ol type="i"> 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScript</li> 

<li>D-Queny</li> 

<li>Bootstnap</li> 

</ol> 

:^\iH dXiSyiVj VxO /&]&) bM)o)\ dximi xjdq 



i o^xflU ^ ol type oxjo^I .to o3\ Jd>V • 
\ito i( i, ii, iii ) 0^)0 (juj^H (pp/iH yJoVudl uw/j 

. yJoVx3ti\ di) ^Valj dim) 

(0A9/1H &» ol Start apoV>d\ (pj \S\ • 

.aa)WH oJx»V\ £ VicO oaj/ibJl crniib ikxj tto /puo)\ 

(p9/j I otol ol (pm<jl) type opoWdl .to (w \S\ • 

.lil&g t ( I, II, III ) /Xp (jiwV (px 9 /j 
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(W body ydoixH a)\ji (&9 

<ol type="l" reversed > 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScript</li> 

<li>H-Query</li> 

<li>Bootstrap</li> 

</ol> 

:^\iH dXiSyiVj 1x0 /&}&) oMxail dxkmi xjoq 



ds> axxx9 s\ 09) reversed oxjoV> Jd>V • 

c^j/l) dig (pij/i yJoVxxH 

o\ on t)xx9 4^x9/111 cxwxfe (pj £xH<) 1x0 yJoVixH o\ Jis>V • 

oaj/jg 4I 1H09 5 gx» U)g cmfe 4 5 xx^ ^.’xbg 1 o» \xx) 

(w CSS (w HTML 9&9 /xsx) (p] (jwUVl ooVxsil 
.Bootstrap (pS J-Query (w JavaScript 
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:a)afl>\ (W body /xaxH d>ta ^\i)\ >9^ boVji) (&9 

<ol type="l" reversed start="0" > 

<li>HTML</li> 

<li>CSS</li> 

<li>DavaScript</li> 

<li>D-Query</li> 

<li>Bootstrap</li> 

</ol> 

:^\iH dXiSyiVj 1x0 bMxdl dximi xx>9 



\sfa .reversed bojo^ cfol^ojul && \jj> a) !<mi\ 


y 


y 


dsg /iuoU a» \u9 reversed start ^9 0 lix&9 

9 ) (j )>9 d) .\ji &9 .3-9 2-9 1- cb/i? t^x> .(0A9/DI £ os& 

./axdl GX» jti\ 9& l» XJO c99M3 A t99>)V) OvW/i &» o()S cjOX^Wttl 

\)iiE9 .2- (W 1- (W 0 £/j 1x0 cx^yJt) c99M3 /fixdl c>0 9& V» V»\ 

.(J&jjj o\ J\ 
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Tables 

^ t 

)9&Jc> dx9 ifxaH xx» \x> (&&» (jjoAloxj /»\ iMxidl /Ujd 

0919x3 \9jlj OVI^aH ci!x>co (j9 <Ia 1 s)\ (oJdjuoq 4O0 n\><H 
d>Va^Vj»o» oW&xxd U/iiall t)gx> x>9 ) ^xa 9 t axAx]oxj ^\x> ^ 

Or^3Q <VwxxiH (jdx) d<)X> x>9)9 t f\9)V\ 

'fliMxal (jx’u o9\ ^>9 t a)V»/J\ Wx> c^lxa otf uq>)\ ^9 
<UaUq ^Vxxoll jtfSl 6 qx> dx» oatf £ VwVp- ^ Wx^l 

w\^\ ^9 osjxVaxAll 0 Va 1)S\ tl9X>9 4(x)9&x&) <^x_) ^9 oJam) 

6qx>q 40XAdsiH x&Vxa )\9 OVxlUlg cxujIxaH £ cxxxaljxll Wx^lg 

6qx>^\ o\ Axl w e$i d3 o»9 t/ xx)ll9 yxxfil Vis/X^g 4<jlj\M»V\ 
.l&- 9 l 9 xU)\ (pll*2 (j9 qxxa&I) oil lx 1a9 4(&&» olx><H ^9 f^aA) 


:udibll Ol/jxax) ^ViH tigx^l ik*j tllkll dxxxw ^ 


/jx&H 

omul! 

• 

Obrixll 

cAlfcH <px»l 

jlxuol 

%90 

900 

)9X)o)\ xx*2 dxl*2 

jlxxal 

%89 

890 

09 x 1*2 39A>jo 

jlxuol 

%85 

850 

xxxxdl 9 /AP 

\x> xx> 

%84 

840 

xa>uo ul&xl 
• * * 

\x> xx> 

%75 

750 

009MX> XA>\ 


9)9 4 ll&X »9 (J St}&X »9 (jSXxix) \x> G)\& 6 qX>- 4 t)()X^\ \x& o\ 111 ^XCkW 

i j ^ ^ ^ 

.d&xw /»\ osjxxxw £xxlai dbb S)9 cxx’xbg o/iowb o\ <&» oodio 
.<xx)\ dx 9 tiglx^l fym> cxxa&\ xlxox>l) \xa do 9 
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:$)W)\ 6qx>^\ <lb <xd\ dx9 6 qjC>^\ omUI $sjj o\ xW 

OMQ9/3 a99,jud\ (j&q .Columns oxjo^I Sybi dgxsH • 
}9J\s)\9 ."cdlj&H (pju\ M >9J\s)\ dl» .d<)i>d\ ojqVx^ q\ .dgxsH 
x>\q dfe ."/JxaxH" >9Ajd\9 ."oxmH" >9Ajd\9 . M <j\»xH 09J&W 1 

.o^/iux) 59 && ojqVxxII ox& o» 

C >0 0)9>9XxH OVilxxH <j&9 .TOWS t 9 <)fl)o ^ Sybt dgxsH • 
jVxx»\ .%85 .850 .xxwdl 9/xx^ ) cixdl dl» .d»V)SV) guqVxsJI 
.( )Vxx»\ .%90 .900 .)9wo)\ xx^ d>l^ ) cixcdl dx» 9I .( 

.i)qX>J\ 0MQ9) 9*1 OJqVwO >XAJO C SDP CXXJ5q .(i)|0 /UX) l&)o OXA^Vl • 

.( /JxaxH .cxxmH .Ol>jxH ^9A>do .cJV)&H (pjul ) (wico 9&9 
< Jdp ^jj \9 .\j^> on 09I0J (Jdp d& .o)/i«x) <jdp do VxSx>o 9) • 
ik>o cxd> ^9 ."cJlj&H (wul" cwxliH da>o cxx 9 cxd> ojqVxxH 
3j\)9 ."cxxmH" cxxdlSl da>o axl> u)\j9 . m 0\>-jx)\ g9J\W' wd)S\ 
.6W9 VxxH c i)o 9^9 .OqV\ cixd) \"x& (J09 ."/JxaxH" cxxd)S\ da>o cxxl> 

.oxjo^Vl ixi? oixflj o\j^> 9 .oVx) 0.) ad) £’xU ^IxH cixdl V»\ 
da>o axl> ^9 .")9X)oU xx^ d>l^ M cxxdlSl dfl>o cxx 9 cxd> Oq\q 

cxd> &)\)9 ."%90" cxxmll dxx>o cxd> od\j 9 ."900" (&9/)\ 
.l&l>\x) ,jx)l Vj^>d\g c99fixd\ (j9V) \’xl &9 .")Vxx»\" cxxdlSl da>o 
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idgxsH opSk d5dad\ 
aALu 4^QX>- ■ 





do 4i5<*a)iO od d<)x>d\ ib\ d 5 dad\ \’x& on Vi) ^jiai) ol)\ ddiosog 

VaO W9x>o Va) d<)X>dl Vilx>d 9)9 t Vj^> ui j ci)o 

0X9 Va 3 d()X>d\ • 

( 3 oxi> — 2 oxl> - 1 cxxl> ) xigVV cixcdl o 

( 3 oxl> - 2 cxxl> - 1 cxx)> ) (jiViH <jbo)\ o 

( 3 c\xl> — 2 cxxl> — 1 cxx)> ) o)U)\ cixcdl o 

\j^>9 Table Row (pjico Table dgx>d\ o\ ii>^i Va0 9 

.(jtf ©x& d>\x) Table Data 
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tS/xjj o\ x)V htrnl cxsDl d>ta &» OjoIsxH bolx) ^99 

:bo\uH ^9 ax)\i)\ tags 
table (WN9H f ibx> /xml) • 

tr fx>d\aj <i)iCk)\ txP /xxx’xi) • 

td (pju^l fx>dmj cxxlxll /xxxxl) • 

:a)afl>\ (W body /XoxxH i)>ta ^\x)\ cx)\ji (p9 

<table bondep="l"> 

<tn> 

<td>cell 1 - row l</td> 

<td>cell 2 - row l</td> 

</tr> 

<tr> 

<td>cell 1 - row 2</td> 

<td>cell 2 - row 2</td> 

</tr> 

</table> 

:^\xH dSdS^Vj 1x0 a &}d 1 boixx^\ dmu xwq 

Q test.html — □ X 


cell 1 - row 1 

cell 2 - row 1 

cell 1 - row 2 

cell 2 - row 2 
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.od Ixd o\ o 3 j\) d9X> JdjnjI 9& \x& dlwdV) 9& InO • 
s\ cell 1 - row 1 din /Xjd cxd> db ooi boll)' Jb>V • 

axj\iH axb>d\ Cell 2 - TOW 1 (W idgVl cixd) ^qV\ cxd>d\ 

.I’xl&g cixaD 

.axnxH jWH a»9 dsunl J\ an d9i>dl <\x) o\ Jb>V • 

cxnxflH table (jxxa^ border buoUl <VM t ®> Vjdj • 

oxjo^I (plxH &n cxxl> do ^qx>q dgx>d\ >9X> ^alax) 1 

(jd V&xxJj (jd <d a3l9 deprecated anix9 oxxq\> border 

.b)9)o)l3 9 & InO ydxmn dgx>d\ c$ /&)&) 

oxnxBQ (W tdgVl cixcd) tr (pi »9 cd>\x) (pi stable (piasdl <Vmj\ (pi • 

(pi t ^i\xH cixd) />\ tr (pjwg (px 4 ^qV\ cixcdl d>b oxxd>d td 

.(jjlxll cixcdl d>\i oxxd>d td OXA1U9 
t d<)i>d\ s&h. <j> C &9 t cxd> do d>b uyi n ocd c^lxa o\ Jo>V • 

.dgx>d\ y&ki (pJ oaxil \x& t 5 x> (pi 9)9 
d9X>d\ dsiii9 4ol>\x) \n <\x) da)9 xi/i d9X>d\ dpt& o\ (pJ^l • 
cb/xH oxjoV >9 t Vxicol l&l>\x) Vn9 c^axoH b/xo" ooxx> xi;i 

.deprecated onix9 a>ue\ d 9 x>d) width 

OlilxxH dp/& dxn ibc^axdl ^ b/do (pi)bij Oldnx) d9X>d\ f&m.) • 
c99x» (jxH 9 tiinl&H Ol>lxx>V\ on a^S >4^9 t,ooVxx)\ (pi}bji9 

.^•yidl <VjS\ cdU o\ l&) db/Xxj 
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:a)afl>\ (W body i)>ta ^\i)\ o)\ji (p 9 

<table bondep="l"> 

<tn> 

<td colspan="2">cell 1 - row l</td> 

</tr> 

<tr> 

<td>cell 1 - row 2</td> 

<td>cell 2 - row 2</td> 

</tr> 

</table> 

:^Vj]\ dl&ll) 1x0 /&}&) a>juo)\ dmu jjdq 

D test.html — □ X 


cell 1 - row 1 

cell 1 - row 2 

cell 2 - row 2 


cASSq t 0X>\9 Ox)l> WXXXOx) V\ Cjb|C>)l (jS GXXXxl> ^X»> (pj oil Jd>V • 

ib\ (jjjo \"x &9 t2 oxxxaH colspan oxjo^I 8>sb 

g\ oxxo?\ >xd £\ Column Span uXcn axW\ 9X& 


.oxxx^l 


^uoxH l&) (pi oxb*H &x &9 (pix oxb*D oxap\ ^x»> xx^ oo\ Ji>V • 
l&jlio 0’x>\ (jxH ax)c*H oV oxb*H 3o&9 (p'w % 

.oVi» cixol) axj\!H axb*D cxjxxli) dxfl)l) 
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(W body ydoixH i)>ta >9^ bo\ib (&9 



oamH V&<Vjb^\9 rowspan ax)o\><H ofiSg 40 \>\q 

>jj\i S\ TOW span GuiDo c2>a» axb*H oi& o'\ ijx \i&9 4 2 

f 

.ts^ajo t5<^a)o 

^uoxH V&) (pi axW\ &09 (ob t 5 <)ajo oj\ Jd>V • 

^\B\ ci)o)\ (j 9 0)9>9» ui'j (jiJl S/>i\ axb*H &&9 (pi) V9 tJoflS 

. oVi» V&) uuib dxfl)V) V&j\ 5 do oxiuoil axb*H oV 
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)<JJ(0 £9309 o 5 j\) ^xj \9 CaS) VjeO ^9 yJoW &309 <y 3 uw 

cikH 'fxSxmi o\ oIajq 1 0909/5)0 0\mxjo VisjV3 9 ^9X>J\ d>\x) 

.\xs bo/M) ha.png 

:cx)m>\ (oj body /XoxsH d>ta ^ViH o<$\ o)\il) (p9 

<table bondep="l"> 

<tn> 

<td> 

<img snc="ha.png" width="90" height="70"> 
</td> 

<td> 

<img snc="ha.png" width="90" height="70"> 
</td> 

</tn> 

<tr> 

<td> 

<img snc="ha.png" width="90" height="70"> 
</td> 

<td> 

<img snc="ha.png" width="90" height="70"> 
</td> 

</tn> 

</table> 
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0 test.html 


□ 


X 






Imsmmm llciirn 




ItUMM Ocatftmy 



RM4MNM flcaitHf 


9*\ q\ oJti &\ oqx) ^9 (pi oil Jis>V 

: te b os&w border oxjo\> 1x9 j> 9)9 40^ 9\ br $jn9)\ 


Q test.html 


□ 


X 



BtnoMM Be arte an 


ItilMHM flearttw 



Mati 


ima ficMtemy 


lUtiiNnu fieMlcflii 


1)9^9 t/&Vx» dim) obtyoH V&i'tf 9 )9*oi\ 


.Wx)axj (jxH 4yj|oVx5)l ^V) dSo 9 4/isVic) 
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:a)afl>\ (W body i)>ta ^\i)\ bo\ji (&9 

<table> 

<colgroup> 

<col span="l" bgcolon="yellow"> 

<col span="2" bgcolon="lightblue"> 
</colgnoup> 

<caption>Employee Data</caption> 

<tn> 

<th>Numben</th> 

<th>Name</th> 

<th>City</th> 

</tr> 

<tn> 

<td>l</td> 

<td>Amn</td> 

<td>Alex</td> 

</tr> 

<tn> 

<td>2</td> 

<td>Ali</td> 

<td>Giza</td> 

</tr> 

</table> 
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:^\1 H VjO a &}d 3 b^to dmu xs)9 

0 test.html — □ X 

Employee Data 


Number 

Name 

City 

1 

Amr 

Alex 

2 

Aii 

Giza 


ol>\w9 colgroup (0JU9H 'flxXowl (W tbxxll £9 xXq W £ • 

booVxll w»d (W9 *Gua» ^ ox/a^Vl &xto COl (WN9H 

/iuioVl o^UV) W)^ (p,)Q 4 ^qV\ &xto) 1 axxxfl)\ span 
2 oxxxflH ^ span cxpoto ux>o (pj (W .x>\9 >9 jo^ /jy 
.ao9&<? /jW SjjVl G9DV) W)y (WQ 4 ^j\x)\ &xaXxD 
/Xoxsd) buwx9 V&j\ (plsU .bgcolor cxpoto 'flxSdwl Jd>V • 
.oixxo ol^l) oxxx^Vl &xa>o )to>V 0^9 dSub table 
&xa> dx9 tlgto oW‘x^ Caption (WN9H fltoal (pi • 
.bl>\w Employee Data ooVo 9 
Vx) th (poa^l cx) o\ Ja>V9 .tbo^V) tr too t)9\ \xx> • 
.39^ dfi Table Header t)9x>y 0190? dax) td ^9)1 <a» 
JqX .0J9VxxH dl& cxxto od>V) V» >wx) th (0JU9H o\ Jb>V9 

.cixoxudl £ 09b 9 dxso 
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:a)afl>\ (W body d>ta ^\i)\ bo\ji (&9 

ctable width="90%" border="l" > 

<thead> 

<tr> 

<th>Number</th> 

<th>Name</th> 

<th>Salary</th> 

</tr> 

</thead> 

<tbody> 

<tr> 

<td>l</td> 

<td>Amr</td> 

<td>5300</td> 

</tr> 

<tr> 

<td>2</td> 

<td>Ali</td> 

<td>6700</td> 

</tr> 

</tbody> 

<tfoot> 

<tr> 

<td colspan="2"x/td> 

<td>12000</td> 

</tr> 

</tfoot> 

</table> 


151 (oij 

www.hassouna-academy.com u~V' 










HTML Zero to Hero - From Hassouna Academy ^ 

Hassouna Academy Basic Rock - Like - Subscribe - Share - Views +0 
www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

:^\1H 1x0 aXaxaH dmu xsig 


D test.html 


□ 

X 





Number 

Name 

Salary 



1 

Amr 

5300 



2 

Ali 

6700 




12000 






cxaxaH ouwxaH width oxjo^H 'flxXxwl (W oil Jd>V • 

th o\ ^xxiogxlg cb/sH a» cmIaJV) axxwu x>\i) 90% 

.cx&lmH /xlo V»xV^ ofiSg icixaxxxxH ^ al>\x) V» ds> 
cxl>\x) ojgVxsil cibo &xam) thead (wwgH flxSdwl (W oj\ Jd>V • 

.dgxxH 6 q\ (j9 

OlilxxH tSsiioo &xa><x) tbody (&x»s>H f\xXxx»\ (oi oil Jd>V • 

.ilgjbM ci)oxx» (j9 ai>\x) 

bd>\x) cxjo^xH &xa><x) tfoot qju^H 'flxMwl (W oil Jd>V • 

.^9X^\ >\ £ 

&xxx >09 ,thead (wagH d>ta ojqIxxH &xa>o o)\> ^ oil (pJi^l • 
(pjugH d>\) ooo^H &xa >09 , tbody (pjugH d>\> tAiVxxH 
cxaliNxxH OlaxxaixH iW xx> W9 eUt^ d&mx» \x& o\9 dfoot 
<)>$)£ (pi>oli CSS wdJl on ab&xix) WxxH &xa> 

.oC>o 1x0 ailing (p&x» 
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Form and Tools u\»% o\ &V&)\ 

^93^0 <^\)3 oVf d>V»\ Vx><^^9 d& ^9 

oxa^/Jl fx>dmn)\ 03M9 S\ GUI _) c 99 ,xn 939 . \x> f\& 

(^9 .Graphical User Interface 
£ coulixH O^oVxj g\ fVjDJ q\ kali/) otf <\ 9 ws .ogVmil (W £x)\ 

09 S ATM fl\ cM/Xcdl axpln f6*m Wx^ ^xn9 .OVli^dl 
laxx^g 4 ^ 9 ') g\ g\ (plxxm) l3sn dnlxw a 3>\9 einVnl 
omqWH $.imq desktop ovxl&H m\& c(n\n\ osito /jsixwxlSl 
p"x)\ ci)V&U f&tm \»xx <?9 .)Vx >09 (^/>dx) "x9\9)9 OVi^wlg 
j\x>d) cxixaDV) O^aijg OVi^a/lg ^xnlyj ein\n\ 09 b smartphone 
03 M 9 dn>o c^xio'l ax)V)/3lH o;3>V\ <jj>9 d) .Ca>o 1x 0 ^^xjg 
0 x 3 ,&n dnlsxH <ViS\ i);xn)\ a)) Jix? ,nV\ dx3xix’x) 'flx>oju^ axn 9 W) 

0 x 3 1)39 tbxnsixJl Vj3Vx> ^9 WxMwd /xxb yjj'Vg 0 x 3 d3 .o>3>^\ 

/»V\ o'j 1x0 4/»\9V\ a)\o an Vx) al3xa)\ axnlxMxaVl c/V3>\^\ 

. \x> Ixasn ^xjoV /nlgVl boVilo Vpr^^l f lx>oxa\ o'j \S\9 . lxox9 

.Jafl9 axxcoc^dxdl V\ anxMnn V 9 

4 (i)V 3 H 9 4 >3 9XXJoii \ 9 .(ifixH £ 'flxSwnl u\ 3>\9 S \x 3 o\ 1x0 9 

html ax) c() /99J .V3/X^9 .aox^l 0V^W)\9 40 )W )\9 .b>is.>-V\9 

axnx>oxan ^ /nVl dx3wxx) axn^w) Ol3>\9 o^Vxjo an cifodw f 9\»9 

.b£*fi)o)\ (oajwoxU axil) 0 \ 9 i\ &n . 0 ( 59 ^ 
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gw dSjSsn W m 


0 test.html 

Full Name: 
Password: 
Birth Date: 
Gender: 


□ 


X 


Mohamed Ahmed 


mm/dd/yyyy 


• Male O Female 


Country: 

Egypt 


▼ 

Description: 

Welcome to Web 

Hello Everyone 

/, 

Files: 

Choose File 

No file chosen 


r— Main Selection: — 
' HTML CSS 


Options: 


First: 

Second: 



03:30 AM 


n 


U 


Commit Now Leave 


WIjSojuI gjIaj (pi V\q Ol&lw 

l&j\<p \9 forms Ol&lmH $lsx) Wx9 html ajd)\ 

djli&H £ oboV»\ ^i)\ a&li&H ^ ^ d\9 t form tools 

Ochsuo booAJW^) oo o)ioV> g\ (wag a) 
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label £)lxU oW'xxH ^9 • 

:o)m>\ (W body yjpxxH d>ta (JUH boVib (&9 

<label>This is my label l</label> 

<label>This is my label 2</label> 

: ^ViH dXiSyiVj 1x0 oxiupil dxkmi xx>9 



.ax 9 axx» &)09 (<xx) (&>W9 oil Jd>V - 
d>ta ^9 oaliSudl gwqVxsJI ^ 9 ) o\ fla - 

u\x)S xx^ xx) Wx9 ohym) l&x9 (pi>o 3 (SSig label 

.CSS oxDl <39 cxaUVl 0 />oo 

./Wl cm) ,j9 osito d) thl din /}m i)jd) V (jxw )9 oil ii>V - 
V9 label (j9 oooxSowuxH dCw9W &09 op/>\ ! (Xx 33 \ - 

.xx) Wx9 V&/X3U /ioxa) V cjb- opjJ Wil) 


:o)m>\ (W body yjpxxH d>\) JlxH >9^ o)\il) (pS 

<label>Image 1: </label> 

<img src="ha.png" width="99" height="77"> 
<bn> 

<label>Image 2: </label> 

<img src="ha.png" width="99" height="77 M > 
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0 test.html — □ X 



imsDuru (Icademi 


Image 1 : 



Masiouiu ilcutfliny 


Image 2 : 

w 


fV»'\ olquo o»\j>dwi\ (w label >00x5)1 o'\ Jd>V - 


.l&XP /U5xl) OJtyO 

^o»s>)) d>ta Image 1 00 u<$oo gIsixp dap (&5 oJ\ Ji>V - 
label (pjuQ (po tbr ^si)V go 4 o)spo (w Jabel 

.£/>\ 0)^)0 (w 4Image 2 bl>\x) u<$!» >>\ 
0)<*)o)l fV»\ Oiu) CXxD tOJ<J)o)\ )W JlP label (OJU^H o\ Jd>V - 
up dxasVlg 4 0)<wcd\ daxul up d) 4 >owVx» d)Jb 


.o)^)o)\ ci)ou» 

(pju<*)\9 label (poas))) (poico O/Xp ojqV> x>() 3 V oil ix>V - 
cu 3 (pAsij o\ X 5 ) chip <Vxux\ dx&m) a>\<) g\ 5 oo ^ l 5 » img 
suauHg cb/>o)\ di» Java Scripts css ^9 owWVl o/Xjo 

.jlaJ&Vls <Va>V \q 
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fiMwu <39^9 4 /jJ \ (fc^iu exfig $)W\ d\jjd\ ouiu d/ax) f 9a) < 39 U 3 g9\ 

duoaxll) dx9 on a>/>w (pj £x)\ table (ojm 9 )\ aKx»W> 

.ddiaM dim x>\9 o\io ^ l&)x>9 /KiVxsil ox& 


:(x)m>\ (W body yJoixH d>ta ^ViH ><$1 o)\ji (&9 

<table> 

<tn> 

<td> 

<label>Image 1: </label> 

</td> 

<td> 

<img src="ha.png" width="99" height="77"> 
</td> 

<tn> 

<tn> 

<td> 

<label>Image 1: </label> 

</td> 

<td> 

<img src="ha.png" width="99" height="77"> 
</td> 

<tn> 

</table> 


157 

www.hassouna-academy.com u~V' J*—<j JajI 










HTML Zero to Hero - From Hassouna Academy ^ 

Hassouna Academy Basic Rock - Like - Subscribe - Share - Views +0 
www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

:^\1H d(&)V) VxO z&iw dmu wqg 

0 test.html — □ X 


Image 1 : 



Image 1 : 


Mass mania ficaricmy 



Nassmana Ocaiemy 


4§)W\ t)\k)V) oojVaaH d^iosl dlJb oaiiia /toVixH <a\ Jd>V 
z&ia) 1 cxmll ^ tb&d) border cmoV> Jawico \S\q 

i^VDI dl&H i)i» di&H ofi 


D test.html — □ X 


Image 1 : 

lassouna Academy 

Image 1 : 

Nassau rut Academy 


.ai>\x) yJoVxsil (oa]diU) f V9 cjuO Vi) <SSx)9 
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( JJj/iH <\>) tdqjo) Q>J& (OJU^H \~X& ) input 0^>XJ\H (OJUQ • 

l&x9 oo^l oCxsdo f&tm £"x)\ o\ ,jxxj d)oV\ ^ 0^>x» oxd)S\ 
olqxsHg (w»V\ dx» kcmsib l&x9 d>xx) o»l»l o^Q/XB /JoVx^ 

./XxiSIq /XX)S\ i&jjldlg 09IH )Vxx>\<) cjoI&Hq ^Q/SlWl W/dlg 


:a)afl>\ qj body /)oxsH d>ta boVji) (p9 t default 

<label>Full Name:</labelxinput> 

:^\j]\ diwdV) 1 x 0 /&}&) oMxdl dmd X 30 Q 



cxoiH /jd oW'x^ boVSii label (w»<d\ Ix»x>ojn\ \jj\ Jd>V - 
.d»V 3 iV> (paW\ £\ Full Name odSil d/^o 
.input oMxdl ^9 op 3 &)/» <\id\ Ja>V - 

d>\) uxx Full Name b&ti op> &)>» ii>V - 

:^\j]\ d(»d\ dx» tOAJul bMxdl fxSxwuo ox9 

D test.html — □ X 


Full Name: 


Mohamed Ahmed 


d>b W/j V» o)^ ,j9 o)/>^\ o)x) bMxcdl 'fxMwuo &\ Jd>V - 

.£9xXo 09x3 /)ox^ input d\ (plxH iCxaxH 25 j/» 


159 (oij 

www.hassouna-academy.com u~V' ^ ljL**, J*—<j JajI 

























HTML Zero to Hero - From Hassouna Academy ^ 

Hassouna Academy Basic Rock - Like - Subscribe - Share - Views +0 
www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

:a ks>\ (w body ^ do\ t text, password 

<label>Username:</labelxinput type="text"> 

<br> 

<label>Password :</labelxinput type="password"> 

:^\iH 1x0 bMxcdl dxkmi xjoq 

Q test.html — □ X 

Username: 

Password: 


.text o&xaH ^ input type ouobdl - 

o\ (plsil &n .username fxsxmH (ww\ f\s\ 

.opj .ov^l/bVl input text 

input (w»q password ^\ bootf f V»\ oil Jb>V - 
password cxnxaH od type oxk> 1> J&x& (W a $9 

,/mvH cxnl)S /&&n opj &)/n l&lxxng 
cxaJoq fxSdwxnH (pjuV (jxx9 bCxiucdl fx^xrnn d>x) Wxx> ail Jb>V - 

:^\xU di&H din /wdl 


D test.html — □ X 


Username: 
Password: 1 


mohamed_123 

. i 


.dgx> oqx 3 (pdbixn ^ o>juo)\ yJoVxxH dl& o\ Jb>V - 
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:a)as>\ (p5 body /Xoxsil ii>b ^iiH ><$i boVji) (&9 tbllttOIlS 

<input type="submit"> 

<input type="reset"> 

<input type="button" value="Button 1"> 

:^\1H db^Vj Wf a>juo)\ dmn xxxg 

D test.html — □ X 



Submit 

Reset 

Button 1 


oMflU Jis? input type onoix Jana xxs? Jo>V - 
antf axis? axis? Jajuiail o 5 j\) jj 69.^0 Submit 

iix» submit bmxi^Q t a>juo)\ Jis? axa/s? s\w\ Submit 

.'^W» 

bj\xflil Jls? input <p^ type anoi> Jana xxs? Ja>V - 
antf axis? 00J9 axis? Jasjiail ain) jj reset 

%$>■) (jixi reset oaJjq t a>juo)\ J^s? a&/s? <VxS\ Reset 

ss* t t 

<j 9 OliVn ^Ixn 'fx^xwuxH (W <*) £\ 4V&U0I Ji aMxail 

ujij Vxxf as?)\9 &>, j reset jj Jis? Jaxxa (px aoj Oix)/» 
.a>juo)\ >)oix^ &ux>J I’x&g t a>juo)\ dwxX cnlx) an axis? 
wxxflil Jis? input (ww^iJ type ax)io\> Jana xxs? Jd>V - 
adSli axijj (W ailg t cxxis? Jaxtoil o 5 j\) jj ii<£>o button 
.)>H Vsna^s? (pxxi value onoUl ^ Button 1 
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ojVIS^ (wj (p&»\x>oju\ xx^ reset ggxHg submit ^gxH - 
<ViS\ )J\ Reset g\ Submit <\ 9 xu 
0Al9 CXCIXXCl*) OP (fc&jbJj /USD a3j\) Od\ VflJ .OC*a),cd\ 
.button &n VUs.9 Vso .value axxobJJ 


button an value cmobdl tsx> (w g) oj\ (pJ^l - 
iJliH dldadl dxn . In Ini %)\s &*a)ia)\ /&&) < 9 gw) 



cio/xanH on cxxl^ Jasjicdl xx^g Submit £gxU 'flxSoxal xx^ - 

.&*suioD refresh c^)x>d dns) fga) oj\ 
^gxH cxax|>99 .oC^axcdl dxn>o oxl^V Submit cxaxl&9 - 
d>b Vitf \S\ V\ oV) V .yjolxxd ^l^Vl bV^V reset 
.X5J Wx 9 oAU <lx» <a\ cx>/m 3 t 9 g\ag .form (wagH 


:a^a>\ (jx) body d>b J\i)\ >$\ boV33o <ps .checkbox 

<input type="checkbox"> 

<label>i agree on all terms</label> 


diadV) 1 x 0 oMxcdl dxkmi XX) 9 


r 1 test.html 

— 

□ 

X 

i agree on all terms 

C-' 
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)Vn>\ Sgxbo Vi) \m\ checkbox e^i)\ flxMwl o\ ii>v - 

u)& 5 X& 9)9 t(pJjD gl >x>o cxxli? c^bitiD 9) £x)\9 t o>juo)\ ^ 

.a»ta)\ d)^ S />\ 0/» 

.)Vu>V\ gx» icpoa/dl boVjl) cxxiVxi label (wag )9>9 Jd>V - 
jVxi>V\ Squjo o» V&xHjl 9 I o»ta)\ &X &9 (aw V oj\ Jd>V - 
(w» 9 )\ 9)9 4(ul^ JdjuaIV) \S\ V\ checkbox 

.<,3& $\ u)S) a) label 

(W body /xoix)\ d>b ^)Vi)\ boVji) (pS 

<input type="checkbox" id="cbx" checked> 

<label fon="cbx">i want to update</label> 


:^)\i)\ d(&)V) VxO /&}&) o£*a)o)\ dxx&j X 309 


Q test.html 

— 

□ 

X 

* i want to update 





>9>9a)\ label ^)»9)\ d>ta cx)9x1a) 1 oja)i)\ 9) oV\ - 

checkbox Jojuico g 6 )j 9 jVu>V\ <§ 9 xioo )\ 9 >o 

4^\ia ux> cio iO/aDll on cxHjVl 9 \ wx>ol\ &x]axwu S\ tcxwxflj 
(wwV) input yooixl) id t9/S» (&9j Vboxo> V»xx^ ux> xa) 
^9!) for cxx)oV>Jl id t9/ju\)\ (pjul oixfli Vxxcoio> (pi cbx 

.V&*» i)Vs9 osiix) Jabel 
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./toVxxH &xa><) id cxxjo^I <a\ (pl^l - 



.for cxxiolxll £ (wnVI cmi />\ (w»\ £l) 


checked cxxjo^I oolx)' o\ Ja>V - 
sqxxjoq ixw ds> input checkbox 


>x>oo jVu>V\ 


:oto-l (p.) body ydoisll d>b >9^ w\jl) (ps .radio 

<label>Genden:</label> 

<input type="radio" id="gl" checked> 

<label fon="gl">Male</label> 

<input type="radio" id="g2"> 

<label fon="g2">Female</label> 


:^\iH 1x0 /isjw bc*a)o)\ dxx&j xs)9 


0 test.html 

— 

□ 

X 

Gender: • Male 

Female 




/Xax^ V»Vja 3 Radio )lxx>V\ ,)ox^ o'\ Jd>V - 

mx checkbox £9^ .Check Box jlxx>V\ S9xxx> 
.to wxmD 9&9 radio £91)1 V»\ t x>»o ^x^ <j\ 

<jx) 0)9 to >xx Female oaJ 5 S\ ^ oV\ too 9) - 
.(fc&x» £\ oU)\ 2dtox) a) (w .Male odiH 
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:a)afl>\ (W body d>ta 09^ cu\ji (pS 

<label>Gender:</label> 

cinput type="radio" id="gl" name="gend" checked> 
<label for="gl">Male</label> 

<input type="radio" id="g2" name="gend"> 

<label for="g2">Female</label> 


VaJ /&}&) to&xdl dmu X3ug 


[ r 1 test.html 

- □ X 

Gender: 


Male O Female 


dimH duo osib Female oaJ 51 \ alb 


H test.html 


- □ X 

Gender: Male 


Female 


:^\SU dl&H 


ax)o\>J\ radio Zy )ln>\ o>dlx» (W ofijjQ 4\jiis9 

<3jo cuiau/iall radio z\^i\ ouiajiUQ oj>\q d() name 
oxjo^Iq name auoV>d\ <a\ (jdsdl &» 4(WttV\ um,) (p&jia*) 
.c&co/dl i\& Wo9)o>9 yOoVwdl 3 jo l/UJ o\nx>duu value 


dx» osito c5^ui Male cuallSl 3 />\ 0/» ctoo 9)9 


r 1 test.html 

- □ X 

Gender: 

• 

Male Female 
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:oJia>\ (w body j&mW d>b ^\iU ><$l bo\j& <o9 .number 

<label>Count of Subject:</label> 

<input type="numben" value="0"> 




0 test.html 

□ X 

Count of Subject: 

C| - 


s\ boll)' )Vu>\ V number e<^\ efi\ &>V - 

.to f\&M VI OpiH &)/» ^9 

fl 9 )V\ )lw>V cmsi cxoiM &)/» <j 9 00,15)0 odA&ws Ja>V - 

.^9/)\ dxlad daxwl (o&xnq t^9/)\ bolo;) (p&m9 .l&uo 

:cx)m>\ (W body yOoxxH d>ta ^liH o<$l will) (p9 

<label>Select Percentage:</label> 

<input type="number" min="0" max="100"> 
<label>%</label> 

: ^ViH dlo&K) 1 x 0 ,&}bo bM)o)\ dmd 1539 
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max cxuo^Hq t 0 min oxjo^H aab o\ ix>V - 
oj\x 9 0 (p&xwV\ on V&)\i>o bu&x9 ds\ S\ ‘100 
.a)9X» cxxxaj )lxx>V t 100 (jx&w)V\ on 

bdJ(0\>J\ JdXXO XX) CXQXU &)/» CXQ/^ (&>> /XXX) (W o3\ Jd>V - 

.ciiQ/xH xx;x t59») Visj^V)) <px 9)9 ‘100 max 

:a^fl>\ (w body yJoijtH d>\i y$\ boV'i (ps ^search 

<label>Seanch:</label><input type="search"> 

:^\xH dl&lV) 1x0 /&}&) oChsu^I dxx&x xxxq 



.oM> o» £*xH (&w uxx> ‘Oioj &)/» ikx) search £$1 - 

:<j)\xH dSd&ll) 1x0 a>iuio)\ od>b upj cx)\o xx^ - 


r 1 test.html 

— 

□ 

X 

Search: 

Hassouna Academy 

X 



JdjuaII (px 9) c4>o u^xxU f$J\ )\$>o X o»^ Jb>V - 

.f$S\ cSxX f^ax Wl^ 


167 4 =>eA ^3 

www.hassouna-academy.com u~V' £4j^' ^ <J^ J ' 



























HTML Zero to Hero - From Hassouna Academy ^ 

Hassouna Academy Basic Rock - Like - Subscribe - Share - Views +0 
www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

:od&fl>\ (W body d>ta bo\ji (&9 t date 



di&H dx» ojjo )\i>o calendar 

0 test.html — □ X 

Birth Date: mm/dd/yyyy t ▼ 


November 2018 ▼ < • ► 


Sun 

Mon 

Tue 

Wed 

Thu 

Fri 

Sat 





1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 ] 

15 

16 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 



oUaxII o\iV\ ox& jl&J&V oVUx9 V» do o\ Jd>V - 
.input (&»><$ type auoUl J\ date 
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:o)oa>\ (pj body /Jowl! o)\ji (&9 

<input type="file" multiple> 

:^\1H 1x0 a>juo)\ dxx&j wdq 



$)WH fci) u/ij j Choose File oaliSl o'\ Jd>V - 
.oVabo )Vxx>\ s\ .Choose Files odSll 

iix» oyh OVskU opju )Vu>\q j;)\ xx) - 



Ixxa> (o& 1 a> (pjg .ox>lg ox 9 ) u \abo 5 )lu>\ (pj oil Jd>V - 

.obV\ d>b 

(pix (j&9 .accept (jAww oxxx» Olabo dqxa) ox)ioV> x><j) - 
Jawing .Joa9 Olabo dqxa) image/* l&Joxxo 
.o^l oVak) audio/*9 .<*maH olal» d^xa) video/* 
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(w body ^ ^ViH >9^ c^l .autocomplete 

<fonm autocomplete="on"> 

<input type="text" name="txtname"> 

<input type="submit"> 

</fonm> 

dXjS^Vj 1x0 ,.&}&) oCnaxdl dxsmj xx)9 

0 test.html — □ X 





Submit 


l&x)x>o <pj li&9 .autocomplete ayo\> >9>9 Jd>V - 
.oMxdl 'fxSdxaja] dim) dfl!i ^89 .form (w»9D Oil 
.l&b/sa (jdd c()i9 .oiodl 2L)/id name ax)oV> Jawo a» wV - 
.submit ^ dxs)t)\ (pj .qaiH &)/» d>b qju\ d>)\ o 9 \ - 
:^\iH dlmU 3 j ,j cS9>»9 .ahmed d\kH dum 

D test.html?txtname=ahmed — □ X 





Submit 


Jix? <lb .ox» (pjuVl dfl> oj\ x>dm9 .b^^l yddl - 

.odbol 3 i\\ ^mV\9 .txtname 9^9 oJ olnjb^l sd\ ^mV\ 

.ahmed w 

.<3) lad dmsxrn autocomplete aooVxH >x>o (pJ 9) land - 


189 (oij 4=>«Lfl^3 

www.hassouna-academy.com u~V' ^ <d?—j <J^ J ' 































HTML Zero to Hero - From Hassouna Academy ^ 

Hassouna Academy Basic Rock - Like - Subscribe - Share - Views +0 
www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

.omsu input autocomplete ouo\> - 

d(»dl op^\ &),» >x> - 

Pi test.html?txtname=ahmed — □ X 



Submit 

ahmed 



.dp o» (pj W) ^/ia» jl&M (W oil Jd>V - 

.submit Jwbol (w .oedH p />\ (pjul d>>\ - 

:^\iH d(»d\ S >3 .amr t)\kH duw 

D test.html?txtname=amr — □ X 





Submit 


>y\ (pjuVl dfi>9 ^>>1 0/» /pj oMxdl ^ - 

.amr w .odbol £‘d\ (p^Vl^ .txtname 

dlJ&H .Joa9 oiodH &)/» )x> oV\ - 


0 test.html?txtname=amr — □ X 



Submit 

ahmed 

amr 
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.dx 9 o» oJV>)\ (pj W) />\ ^-/ia» )V&M (W oil Ja>V - 


:a)afl>\ (W body /joisll d>b ^\i)\ >9^ bo\ji (&9 

<fonm autocomplete="on"> 

<input name="txtname"xbn> 

<input name="txtnumber" autocomplete="off"> 
<brxinput type="submit"> 

</fonm> 

:^\1H d(&)V) 1*0 dmu jjdq 



on omsU autocomplete m oV> <w o9\ - 

WsVajV input off am )9 dorm 

7 ^9/)\q adel (pjul d>>\ tto axl^ 



V (pS/D ouValiH akiH t (OAaH ck> a&l&H o\ Jd>V 

.(WttVl dk ^\/i9\ iIajo 
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(w body d>\> <)\&\ >sJS\ .autofocus 

<form> 

<label>Name:</label><input autofocus> 

<label>City:</label><input> 

<input type="submit"> 

</fonm> 

:^\iH dimll) Wi oMxdl dutm) xs)9 

Q test.html — □ X 


1 

City: 


Submit 


oaa9 &\ 09W autofoCUS bd)o^\ o)\ii - 
dim) <& input J\ \ia ^ )\&) )lu>V\ c\*> input 
.o£*a)o)\ du\>o o)\w .od f x>dmjd\ )Vu>\ 09) ^Val) 
dim) dfljdm .l&) (wqV>0 form (pmsdl 09W o)9>9» \S\ - 

di» .text ^ J>\ tty ^ Wb/>d) Csy 9 \i\ - 

. V)ico\ (&&d^ d/ajt) t59m .checkbox g\ radio 

.text osi) o\ bA cmdg 

ooi) o\ f)>dmjd\ o» W/) efi\ odV> ^ oua» ayoV>d\ o"x& - 
. Vg\ o)Vw>\ 09) ./mVuo dim) ooidl d>ta 
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:a^a>\ (w body >ooxsi\ d>b <)\d\ ><$\ boV33o (&9 t dirname 

<form> 

<input type="text" name="txt" dirname="dir"> 
cinput type="submit"> 

</form> 

db^Vj oc>iuo)\ jjdq 

D test.html — □ X 





Submit 


Cs x> oUq tdirname owx> oxjoVx Jd>V - 
d£»d\ duo up 3 d>o\ aV\ t \u> oo/XxH uX tW&io 


D test.html — 

□ X 

abcj 

Submit 




:^V‘xU dl&H duo ci) /&)&uw 9 ^submit Joibol oV\ - 

Q test.html?txt=abc&dir=ltr — □ X 





Submit 


dir oJja>9 .abc am> £qW» txt c]&> o&\id\ o\ Jd>V - 

.ltr £qW» 

buodfb ^ abc ousH? anput <^\ txt o\ Jd>V - 

.oiolH 3j,jo ^9 l&Vibol 
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)) (W (o)\i>\ cd>ta ci9) cxcdH /» xx> oV\ - 

dai (&xx) gxxaxH shift jjg Ctrl 

d)Jad\ dx» oj opj uti\ (W .gxxaxH 


gviH 


dir oJuo>9 .xyz ki) £<)W» txt da> m\x&\ o\ Jd>V - 

.rtl aAXfl) £qW» 

.Wte l&kx& 93 dirname cxxjoUI oV dir o\ i*>V - 
cx&li&H da> .)WH <£>o dx 9 o» btf Wx^ opjll oV>o\ o'\ Jq>V - 
)WxH on odH &)/» oV> 3 \ o\ l&lxsag ltr ajcxxax dir 

.gxxaxH 

dir cx&li&H da> .gxxaxH sx>o o'j Wxi? cxaiH oV>o\ o'\ Jd>V - 
jWxH (j)\ gxxaxH o» oioxH &)/» oV>3V g\ l&lxxag rtl bmxxa) 

W) WxXjjx’x) a \5 os>9 olU dxos) OV»s>h/d\ ox& d3 o\ Jd>V - 

cbt99» <\id\ xx^ 4 XX) 


D test.html?txt=abc&dir=ltr — □ X 


|xyz 

Submit 





dSuadl dx» efl a^xwq .submit ^ bx&\ a 9 \ 

Q test.html?txt=xyz&dir=rtl 

□ X 


Submit 
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:a)M>\ (w body /joisil d>b boVji) (ps .disabled 


<fonm> 

<input type= 
<input type= 
<brxbr> 
<input type= 
<input type= 
<brxbr> 
<input type= 
<input type= 
<input type= 
<input type= 
</fonm> 


"text"> 

"text" disabled> 
"submit"> 

"submit" disabled> 

"checkbox">OK 1 
"checkbox" disabled>OK 
"radio">OK 1 
"radio" disabled>OK 2 


2 


:J\iH VaJ && bojtx^\ dmu jjdq 


Q test.html — □ X 







Submit 

Submit 


OKI OK 2 

OOK 1 OK 2 


aalij .input disabled auo\>J\ wVo o\ i>>V - 
.O/uij q\ cxnliMxal .oC*so,c>)\ fbtm <2U]dIwu V . V»W) 
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(W body ydoixH a)\ii (&9 tform 

<form id="fnm"> 

</fonm> 

<input type="text" name="txt" fonm="frm"> 
<input type="submit" form="fnm"> 

0 test.html — □ X 





Submit 


:1x0 z&iawttQ submit (W opjil cvco d>>\ oV\ 


0 test.html?txt=abcdef — □ X 


Submit 





o\ (fclxH (JO V» C^XJ> 0>juo)\ b\ b >V - 

4 \»lxo form (jo»s>H oeoH input 

(jow<*D id $)/Jd tform (juu<*)V) (jx&9\x}\ (jo ajSg 
id cm) (oa) form aoo^l (w dorm 

.cxl>\x) Wxjoli) form 
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:a&a>\ (w body yjoixtt d>b ^\iU ><$\ do\ dormaction 

<form> 

<input type="text" name="txt"> 

<input type="submit" formaction="pagel.html"> 

</form> 

:^\1H db^Vj 1x0 a>juo)\ dmd jjdq 

D test.html — □ X 







Submit 


pagel.html ooaxaH J\ dam) submit j/)\ oV\ 

dSki&H VxO 

0 Page 1 — □ X 

This is page 1 
Welcome to Page 1 V 


£0 input formaction cmoUl dm& (w - 
ogUil (w sd\ pagel.html dkH )W» submit 

jjH oj&&» nai j xx) cxx)\ dlaxiVl (old ofiSg tdx9 gx» 

.image e^dlg submit £<dl) formaction !<xm\ - 
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:od>a>\ (w body /JowtH d>b cw\ii (p5 t action 

<form action="pagel.html"> 

<input type="text" name="txt"> 

<input type="submit"> 

</fonm> 


:^\1H d(»dV) Wf /&}&) oCnaxdl dxx&j xxxq 


Q test.html — □ X 


Submit 





pagel.html ooaxaH dam) submit j>)\ ^ \ 

:<j)\i)\ dldadl Wf 



^x)\ oj form action cxxjo^H - 

ogUdl (w £x)\ pagel.html dkH )W> submit 

cxxx&» xxai x xx) cxxll t)\axjV\ (plx) ofiSg tdx9 gx» 
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:a^a>\ (w body ^xuxH d>ta J\ft\ do\ .placeholder 

<input placeholder="Enter your name..."> 
<bnxbr> 

<input placeholder="Enter your city..."> 

:^\1H dSdS^Vj 1x0 A& oChsu^I dmu jjdq 

0 test.html — □ X 

Enter your name... 


Enter your city... 


S)/i> d\>o\ 0 \>ddj cull)" (pj oj\ d£&H ^ Jd>V - 

.input placeholder ouoUl 

dldadl dx» bC^sooH <xu)\ &)/» <j 9 a)\^ up Ja>V - 

gva\ 

D test.html — □ X 




Ahmed Omaij 



Enter your city... 


0j\9 opjll Vjoup A-h todiH o\ \’us ^xjooq - 

* ^ 

.opj £\ oj x>9) yg VnW) 
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:aksi>\ (w body jd&d\ d>\> <)\d\ y&\ ajV5 & (p5 ^readonly 

<input > 

<brxbr> 

<input readonly value="77"> 

:^\1H VxO /isjw dmu xxjq 



cxxJiO^H &x &9 cxoxH ^)/» (j 9 dxxx'xH S^l k >V - 

(aw V $\ o<\/ai) ods>o V&j\ <3x5x9 too readonly 

. \w\ axls^ dxxsxH 

oxxo^H cxx ov’i (p] ooV t cxx9 cxx\i)S\ <yi»g 6 qV\ cxcxxH % 1 /n - 

.readonly 
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(w body d>b ^\ y&\ oo\jjj ^ .required 

<fonm> 

<input required> 

<input type="submit"> 

</fonm> 

:^\iH 03dS^Vj VaO a &}d3 oChsooH dmu 3009 

Q test.html — □ X 






Submit 


09) submit j/)l bx&\ required buoUl oV\q 

^09) V/jO .i)V>)V\ o6jo JJq)9 opb/mq .opiH &)/» ^ S\ cw^ 

g\a\ ds^\ 

0 test.html — □ X 







Submit 

/\ 



D 

Please fill out this 
field. 



9 . 0 X 0 /) £\ 090 OVjVxxH on $a>oM (W Ja>V 
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textarea opiH ^9 • 


x>\() opjil Wx9 oo\ 

/iaxaVl ixsjjo opj &>/» <V4j\ (&’u textarea 

a) (WU 9 H \x& o\ (plxH 


:a)as>\ (W body ydoxxH d>ta ^ViH bo\il) (&9 

<textarea autofocus> 

Here put Multi Line 
</textarea> 

:^\1H d(&)V) 1x0 /&}&) a>iu<d\ dmu jjdq 

D test.html — □ X 




}Here put Multi Line 

A 


input (ojnsJI dixbg (jO*> oP cilbo oJ^q oj^> o\ Jd>V - 
/)wn cA)g enter ol>\w oV\q ttext 


d)J3d\ ^093 1*0 dxawag />\ 

D test.html — 

□ X 


Here put Multi Line ▼ 
Hello) /, 
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:a)afl>\ (W body d>ta ^\i)\ 39 ^ cx)\ji (&9 

<textarea rows=" 3 " cols=" 9 "> 

aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

</textanea> 

1x0 oCnaxdl dmu xs)9 

D test.html — □ X 


aaaaaaaa 


aaaaaaaa 

▼ 

aaaaaaaa 



^9i> ,j9 .COls oxjo^Iq .rows cxx)io\><H g\ Ja>V - 

.yjSiVx» dl&) textarea 00^9 
o\ S\ <3X539 .3 cxaxaH l&i&xyx (W TOWS cxx)io\><H Jd>V - 
oj^j S\ on cS^ioo oj^j 9 & fxMwuxH f\»\ ,.&}dj £"x)\ 

.cx&lmH 9& 1x0 ./iwwl 

o\ £\ (3X539 .9 cxxxxaH l&)xx3tx (W cols cxpo^H ix>V - 

olxx) S\ 4 c9qX>^\ gx» oxxx<?\ &wu 9 & 'fxSxwxxxH flal ,.&}dj £’xU 
.cxwiVmU (ji^ ^\9 9 & VxO (j 9 (&3 .cSy 4 >\ 

.ooWx^ flxsxxal textarea ^9)1 &» ohu ! cxx 3 j\ - 
dirname, disabled, form, maxlength, 
.oW&>a 3 .placeholder, readonly, required 
&# 13 ; fx>dxtt\ textarea d>ta ib/jl !axjj\ - 
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button )>H (w • 


(pjusJl W £<&>#> oqw (pjug $)/Jd otf tdx 9 o» j/)l 'fl&ojul 

omsU g\ button ombU oJ type auo\> Jawo &» input 
<\idV £9 xXq a) (pjug (plxijju oV\ a$9 ^reset bucyxaU gl Submit 

.button (pju^l 9&9 t bC*sUio)\ j) 

:odis>\ (W body d>ta (JUH >9^ a)\ji (p3 

<button>Button l</button> 

<button>Button 2</button> 

<button>Button 3</button> 

dlJSyiVj 1x0 /&}&) oMxdl dxk>»3 xs)9 


D test.html — □ X 




Button 1 

Button 2 

Button 3 


.boJix^Vj )) <\idV button ^ 9)1 flxMwsl (pi ail Jd>V - 

*)>)V) OAp dnVx'd) value aoo^H 'flxSdwl oSsa - 
button, reset, submit t\y% type buoUW 
ooWxll (J&9 dx9 gx» Vis> >o3i (pj (pi 
autofocus, disabled, form, formaction, 
formenctype, formmethod, 

.formnovalidate, formtarget 
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select )Vu>V\ (0^9 • 


t 0\)Vu>V\ qoju ^xxu ob\ 009H 0^)0 ^\x>o oVx>V\ oicuo ^ 

I’x&g 4ofiS g\ g\ t o\xlx)\ dx» t oxxs» (jxx9 Wx» j\x>o <ji> 

.bl>lw option ^9)1&» select ^9)19/993 \» 


:(x)as>\ (W body /XoxxH d>b ^ViH ><$1 bo\ji (&9 

<select> 

<option>HTML</option> 

<option>CSS</option> 

<option>DavaScnipt</option> 

</select> 

: ^ViH dSJSbVj 1x0 bM)o)\ dmd xsjq 

Q test.html — □ X 


HTML 


dldadl) VxO /&}w jlxx>M JdjuaII i\& cdlg 



.W/J (jXH CXXXbU )\xX fX>OJiXXxH ds>o \"x&9 
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(W body ydoixH i)>ta bo\ji (&9 

<select multiple> 

<option>HTML</option> 

<option>CSS</option> 

<option>DavaScnipt</option> 

</select> 



)\bol <3boV»\ u\ jVu>V\ c\s> multiple ox)io\><H 


:^\iH dl&H ibm» (oa9 l&uo 


0 test.html 


- □ X 


HTML 

F 



CSS 




JavaScript 





▼ 
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:a)afl>\ (W body d>ta ^)\D\ bo\ji (&9 

<select> 

<optgroup label="Web Design"> 
<option>HTML</option> 

<option>CSS</option> 

<option>DavaScnipt</option> 

</optgroup> 

<optgroup label="Web Developen"> 
<option>PHP</option> 

<option>MySQL</option> 

</optgnoup> 

</select> 

dlwdl) )ln>V\ a>juo)\ dut»d uuq 

D test.html — □ X 

HTML * 

Web Design 


HTML 


CSS 

JavaScript 

Web Developer 

PHP 

MySQL 

Web )\i >0 V ofiv 4^539 OWuo c 2 *j iW (W oj\ Jd >V 
.Web Developer eflog t Vabd V» jl&j d) Design 
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datalist jln>\ ^9 • 


)\& 0 \)Vxx>\ V&3 4U)9)\ bSsop 0 ta\ 06 

40 \)Vw>V\ ^9 /X^ />\ ^ boVI^ ^ a)>H Vjicolg tl&uo 

.l&*9 e&A)J <ViS\ ^/xaj WA 


:a)M>\ (W body ydoxxH d>ta (JliH boVilo (p9 
<input list="mylist"> 

<datalist id="mylist"> 

<option>HTML</option> 

<option>CSS</option> 

<option>DavaScnipt</option> 

<option>PHP</option> 

<option>MySQL</option> 

</datalist> 

:^\A\ dl&A) WY o>juo)\ dxi&j XJ09 

D test.html — □ X 


HTML 

CSS 

JavaScript 
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c99>U cxuWl dlxl^ ^/ia) c99x» t c/x>o \SV» cx)\xD\ xxi? Jd>V o9\q 

i^lxH dSujxH ^9X Va 3 ( W) (pi 

D test.html — □ X 


H 

▼ 

HTML 

PHP 



Ixxl^ ^/l9\9 H (3/> CX)\x3 (OX 0)9Jo)\ (j9 9& Vjqo" - 

.c 9 />J\ \’x& (cx&) oV PHPq HTML 
bJ>\x) /XiVx^ <Uxj\ (0x9 datalist (0XN9H <Vxax\ (px oj\ Jd>V - 
datalist (pxw^l cmxmxx (px (px ^option (ww^Vx /xax^ 1)39 
^x»9 iW (0x9 tid cxx)o\xl\ sx/io <*& mylist (pxuVlx 
(px»\ 9^9 mylist (pxuVl a) list axxob- Jdjxo 9 input 
.axl^ dm! dx 9 a» oVxxaju £x)\ datalist (0XU9H 
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progress^ meter ouVuH f w • 


qoju HTML cxsDl jby dxa>o l&x9 cxxIaju flxaH xx^ 

.cxdj\s)\ o’x& fxaj l&xi) dp/X 


(W body /XoxxH d>b ^Vj]\ cx)\ji (&9 


<pnogress></progress> 


d(»dl) 1 x 0 oMxdl dmd xsjq 



.uVSfl\ ^ bO>H cfc /&}&} o\ &x]axwd V IxdSq 4 ^/Mj <*&9 !oxxj\ 


(W body /XqxxH d>b ^\x)\ > 9 ^ cx)\ji (p 9 
<progress value=" 0 .5"></progress> 

:^\iH d(»dl) 1 x 0 /&}&) oMxdl dxxiad xjoq 



o)\xa» 0.5 cxxxxaH value ooo^H xx^ Ja>V 

.W» )\x >09 1 0 o» W\/X9\ oil \xis (jXX »9 tcixoxx/dl 
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:a)afl>\ (W body i)>ta ^\i)\ >9^ a)\ji (&9 

<pnogress value="3" max="10"x/progness> 

dXjS^Vj 1x0 /&}&) a>juo)\ dmu jjdq 



(pj c 4 > tlO axxxaH ^ ^xmx) oJ max cxx)ioV> /U» (W ail Jd>V 
.fiaxH %30 ibVsi (jxHq value cxxxxfll) 3 cxax)o>o 


:a)afl>\ (W body /XoxxH d>b ^\i)\ >9^ cx)\ji (p9 
<pnogness value="30" max="100"></progness> 

: ^ViH 1 x 0 oM)o)\ dmu xx>9 



ca> 4 100 cxxxxaH ^.xxax) oJ max cxOioV> /xxju (W oil Ja>V 
.'fxajll Jwyix) %30 ibVsj (jxHq value cxxxxal) 30 cxaxxoSo (W 
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(pj body ydoixH i)>ta bo\ji (&9 

<meterx/meten> 

:^\1H 1x0 b^pS\ dmu wqg 

0 test.html — □ X 


.t)\s oChsuoH oj\ 


:cx)m>\ (W body ydowtH a)\il) (p3 


<meter value="0.5"></meter> 


iJVjil diiSyiVj 1x0 t)mu xjoq 


D test.html 


□ 


X 


£ o)\xa» 0.5 OAvaU ^ value Jawo Jd>V 

.l&i» j\i >09 1 0 on Wl/bl oj\ \x& ^jjuog icirndl 


:a]M>\ (W body ydoixH d>\i bo\ji (&9 

<meten min="0" max="100" value="70"x/meten> 

dLiSyiVj 1x0 /&}&) &*&)£>) \ t)mu xjoq 

Q test.html — □ X 


.value ax)U\ mmUq max min dsV\ (pi 
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:a)afl>\ (pj body #xsS\ i)>ta ^\i)\ >9^ bo\ji (&9 

<meter low="0.3" high="0.8" value="0.2"></meter> 

<br> 

<meter low="0.2" high="0.8" value="0.5"></meter> 

<br> 

<meter low="0.2" high="0.8" value="0.9"x/meter> 


D test.html — 

□ 

X 





ul9 9) oai 9 j>\j low ax)o\>J\ 'fl&dwl (W oj\ Ja>V - 
./fijoVl 09DV39 value om9 

Co\j 9) oj\v 9 i>\i (jIHq high ax)o\>Jl flxSdwl (pj oj\ Jb>V - 
./SDoVl 4a>/> value om9 

low d9 meter f 9^9 f \&*m\ Jb>V - 

>oia>V\ 09!) V) oV ^9 (jXu)qU duu\H £ i/flJoVl 09!) 1) 

high £xx) ulUHg ^highg low gxu l» 9& ^jJlg 

./fl)oV\ o^DV) ^/> ^yjols 

x» (jxUq 4ba\x9 WjV^Iq optimum f \)Sim\ db) - 

.ax)\jjfc)\ aaxaH ^ 
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fieldset o\<pV\ &xa>o ^9 • 


.cxl>\x) &09) g\ ojqV> q\ f&tm (pjj>9 9& 


:(x)m>\ (W body /XoxxH d>ta ^)\iH >9^ bo\il) (&9 

<fieldset> 

<legend>Main Data</legend> 

<label>Name:</label><input><bn> 
<label>Email: </label >< input ><brxbr> 

<button>Confirm</button> 

</fieldset> 

:^\1H di»dl) laO toducd\ dmu jjdq 

D test.html — □ X 

r— Main Data- 

Name: 

Email: 


Confirm 


fieldset d>\x) 0\9^ \ a» u/j \» do ^9 (pio oo\ Jd>V 
.legend ^9)1 'flxxjul (pj ol>\x) oWx^ a)\iiS9 
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form tools Ol&Udl 0 \ 9 >\ cxojl),a> ciiojq 0 \»S)Jjt» • 

I&Jjjoq .input formenctype oxjoUI - 
/xa&j boap ax)o\> <j &9 .enctype (pjul) form 
x>V jq .server f>\S^ 1&)W\ i\& form oVjVx> 

oaxaH o\9 d\jj&}\ dm» J^9 .oxP/H u&> (pp 

application/x-www-form-urlencoded 
(pjj ux> .la)W\ dx9 c5/>V\ a9^ /X»/j (pbg .awol/^yi ^ 

J\ t9/>V\ d)9>o (ojoq . 11 + 11 )^») (j)\ Ol9W}\ d)9>o 

multipart/form- kali? .ASCII HEX 
(pw text/plain ojoiaUg .isp- £ \ >x»/j (o3o V (J x> data 
>i»/i (pjj V a $9 . " + " )<j») (j)\ Spaces 0 V 9 WH d) 9 >o 
g\ .oxlH (j9 fx>dwd (jlH ^ booV>d\ c9/>y\9 .000 V> c9/>'\ £\ 

&99J\U S\/5>\ GXVA3 UX> .Ca) 9 &99» <M) 'f&dWU 

formenctype !<ujj\ .< g\ & dx» .l&x)w»W) 

.image submit 

(pjw\) 6^9 form (fcw<$ V&&09 .formmethod - 
V»\ .oa&a}\ tks) ou)\ on ouqa. 9 j>\j ^9 .method 
awol/byi ^ get wxxal) bawdily .get oaiaH 91 post 
\» OP/X) fyti UsiV w»W> /xs)\ OViVuH a)\> ^ 'fxSdw^ 
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■-;—m---;- - - 

CXXA>00 (OAflU j>\j post V»\ lUrl Jw\/J\ <^9 f XMWudl od>o\ 

!<xxxj\ .ux& )V)ox>V) \\a .url ^ ^ 09x> 

.image 091)19 submit formmethod 

I&Jjjoq .input ^9!) formnovalidate auoWI - 
.W\x>dx»\ (w 9)9 movalidate (w»V) <^9 form (w»9l) 

09x)l duo .V&x» $a>o)l (d) V cU*a)o)l 'fxSxuuo 0^>uo ds>o 

.url 09DI 9I email 

(w»9W V&IU09 .input <0^9!) formtarget cxxxol^l - 
axjoV> duo cxx)o\>J\ o’x& aA&»9 .target (&x»V) ^9 form 
!axi3\ .^xaU oixsu Vxicol x>\j9 .JdlxjaIV) a ^9!) target 
.image 09DI9 submit 093!) formtarget 

^.sooxaH Jii? Jofl9 f9^uo input (WU9D tel 09x)\ - 
. cfijWH (p9) t)\>oV fx>duu 9&9 .Safari 

(pxtt9l) 5 oix)9 ox^ (jl^ Visjax^ oh) maxlength axjol^l - 
.t99/> 5 on \ t)l>o\ on 'fxMwudl &xa> c4>o input 
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omVxflU m^\ jnput pattern oxjoUI - 
. Vq\ Wualn jQ/jiw aftg ^regular expression 

c^aiH ^j/» <p>> ds>o kinput size oxjo^I - 

.ax)o\>J\ d>ta (&u (p9) c99/> $S>.) 


soft omsU V»\ j>\j ktextarea wrap - 

oJW\ oioiH tSlfliH i)W\ (pjj V oj\ (jxxig kowol/i9V\ ^9 
i)W\ (pjj oj\ ^9 khard a/uaH V»\q kform ^-S^H 
Jawo J&/&) form S 9 JQk*xi \ (j9 oJW)\ U<? Opjll tSlfiiH 

.COls oxjo^I 


koJ>\w axx» <,j& kj\i boVili Output (pjii<)]\ 'fl&ojul vito - 

.£<£><» 0 ^ (W W 
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(OAAJC*} • 

(W body /JoixH >9^ bo\ji (p5 

<form> 

<table> 

<tr> 

ctdxlabel for="user">Username:</labelx/td> 
<tdxinput type="text" id="user"x/td> 

</tr> 

<tr> 

<tdxlabel for="pass">Password:</labelx/td> 
<tdxinput type="password" id="pass"x/td> 

</tr> 

<tr> 

<td colspan="2"> 

<input type="checkbox" id="r"> 

<label for="r">Remember me</label> 

</td> 

</tr> 

<tr> 

<td colspan="2"> 

<input type="submit" value="Login Now"> 

</td> 

</tr> 

</table> 

</form> 
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:^Vj]\ dXjS^Vj VaJ aJm oC*su,a)\ dmu wqg 

D test.html — □ X 

Username: 

Password: 

Remember me 
Login Now 


.Username bs$\ ^ cbm) uj> - 

.Password oaJ55\ ^ oixwiuo Uj> - 

.Remember me oaJ51\ ^ rfmu ua - 

:^\1H 03dS^\ dl» o<$ OlilnJl dl>)\ xs) - 



* Remember me 
Login Now 
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Sign Up owA& (fcuuco • 

(W body /JoixH >9^ bo\ji (p5 

<form> 

<table> 

<tr> 

<th colspan="2"xlabel>Sign Up</labelx/th> 

</tr> 

<tr> 

<tdxlabel for="email">Email:</labelx/td> 
<tdxinput type="text" id="email"x/td> 

</tr> 

<tr> 

<tdxlabel for="pass">Password:</labelx/td> 
<tdxinput type="password" id="pass"x/td> 

</tr> 

<tr> 

<td colspan="2"xbutton>Sign Up</buttonx/td> 
</tr> 

</table> 

</form> 


:^\iH 1x0 /&}&) dxiisw jjdq 


Pi test.html 

□ 

X 



Sign Up 

▲ 

Email: 




Password: 





Sign Up 





▼ 


PAGE 220 


Create Account Now www.hassouna-academy.com 





















<Ui! JJaij — cit jj^VI fjl J AjIjJI ^ HTML 4*3 

(j£ /^\ + ii3jLujj jaLuij liljILuilj - (j^LuiVt 4_jj ■ ^ AoajjISI 

www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 


label ogx) 0\>dialj guqIxx) cJD&H ox»lx» (ixuxxoj • 


:a)afl>\ (W body /joisll d>b >9^ o)\ji (&9 


<form> 

<table> 

<tr> 

<th colspan="2">Student Form</th> 

</tr> 

<tr> 

<tdxinput type="text" title="Code"x/td> 
</tr> 

<tr> 

<tdxinput type="text" title="Name"x/td> 
</tr> 

<tr> 

<tdxinput type="text" title="Branch M x/td> 
</tr> 

<tr> 

<tdxbutton>Add Student</buttonx/td> 

</tr> 

</table> 

</form> 


o\9X<? x>9) V (jlH yJoVxsD title ox)io\><H b >V 

on W/j V» ^ dl3 title ox)io\><H Jax& (W Jabel 

.cu9 o)\>>\ 'fxSxwxoH 
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:^\1H 1*0 oCxsuckH dmu jjdq 

0 test.html — □ X 



:^\H\ itoV) VjcO oioj W uua) (W $ 

D test.html — □ X 

Student Form 





Code J— 



Add Student 


axls9 I’x&q j &)/» 6 q\ caua) Code oa1)S\ 

\» ojq tydohH oua) o^x) iyJoVxxl) title 

.ydoxsJl \"x&) title ax)o\ixU £ (W 
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label oqx) o>JsVic> ciJc> 9 J\H boSiVwi (pMuco • 


:a)afl>\ (W body /joisll d>b ^\i)\ > 9 ^ cw\ji (p 5 

<form> 

<table> 

<tr> 

<th colspan="2">Employee Fonm</th> 

</tr> 

<tr> 

<tdxinput type="number" placeholdep="Numbep"x/td> 
</tp> 

<tp> 

<tdxinput type="text" placeholdep="Name"x/td> 

</tp> 

<tp> 

<tdxinput type="text" placeholdep="Addpess"x/td> 

</tp> 

<tp> 

<tdxinput type="email" placeholder="Email"x/td> 

</tp> 

<tp> 

<tdxinput type="numbep" placeholdep="Salapy"x/td> 
</tp> 

<tp> 

<tdxbutton>Add Employee</buttonx/td> 

</tp> 

</table> 

</fopm> 
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0 test.html — □ X 

Employee Form 


^slumber 

▲ 

Name 

Address 

Email 

Salary 

▲ 

▼ 

Add Employee 
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OlfllaJl dxjo>o • 


:a)afl>\ (W body /joisll d>b ^\i)\ >9^ cw\ji (p5 

<form enctype="multipart/form-data"> 

<table> 

<tn> 

<th colspan="2">File Upload</th> 

</tn> 

<tr> 

<td> 

<input type="file" title="Click Here" multiple> 

</td> 

</tn> 

<tn> 

<td> 

<pnogness title="0%"x/progness> 

</td> 

</tn> 

<tr> 

<tdxlabel>No File Selected</labelx/td> 

</tn> 

<tn> 

<tdxbutton>Upload Now</buttonx/td> 

</tr> 

</table> 

</form> 
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:^\1H 1x0 ofesuoH dmu wqg 
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cjojomII )Vxx>\ ^x/\),oj • 

:a)afl>\ (W body /Jo»H d>b ^\S)\ >9^ bo\ji (&9 

<form> 

<table> 

<trxtd> 

<fieldset> 

<legend>Specialization</legend> 
cinput type="radio" id="w" name="sp"> 

<label for="w">Webc/label> 

<input type="radio" id="m" name="sp"> 
clabel for="m">Mobile</label> 

</fieldset> 

</tdx/tr> 

<trxtd> 

<fieldset> 

<legend>Levels</legend> 

<input type="checkbox" id="b"> 
clabel for="b">Basic</label> 
cinput type="checkbox" id="adv"> 
clabel for="adv">Advancedc/label> 
c/fieldset> 
c/td>c/tr> 
ctr>ctd> 

cbutton>Confirm Nowc/button> 
c/td>c/tr> 
c/table> 
c/form> 
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0 test.html — □ X 

— Specialization- 

O Web O Mobile 

— Levels- 

Basic Advanced 

Confirm Now 
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:a)afl>\ (W body /joisll d>b ^Vj]\ >9^ cw\ji (&9 


<form> 

<table> 

<tr> 

<th colspan="2">Employee Form</th> 

</tr> 

<tr> 

<tdxinput type="number" placeholder="Number" requiredx/td> 
</tr> 

<tr> 

<tdxinput type="text" placeholder="Name" requiredx/td> 
</tr> 

<tr> 

<tdxinput type="text" placeholder="City" requiredx/td> 
</tr> 

<tr> 

<tdxinput type="email" placeholder="Email" requiredx/td> 
</tr> 

<tr> 

<tdxinput type="number" placeholder="Salary" requiredx/td> 
</tr> 

<tr> 

<tdxbutton>Add Employee</buttonx/td> 

</tr> 

</table> 

</form> 
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Us&k Salary ciy) opjll &)/» uha) ii>V 

\xA9 .Please fill out this field 
Add Employee )J\ 
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iframe . 59 ^ ^WD allow-top-navigation ouaH? 


OJOA9 o» /xT\ o!aj9 >V\ ^9xmvjs 1\ £S fcumoiH sVwa ^9 dau)V) 


W 1 Qijj> iframe ^ 9 !) sandbox ~omW\ d>b 

.o9W) ^>y\9 oax9 


o» oiiloj 9 .cU99» ,j9 map a]w>)\ &&9 c&ju iframe 

.o\xa 1 x) £’x)\ U9M9v)l 9_m9 t)\x» di» .<is99» ^ &9\9» OB <\/>\ ^9 

.olU dxaa) b/WJ <lxwf\ ds9 gx» c!x1a)9 
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Prove Figures tiV^&Vv aj^u fw 


q\ d\5W\ cijaxy] OVxS\ 9 ! gwqw J\ ^\L>o oVx>V\ ciiojq £ 
cjojo &» d»Vxn cd) \S\ g\ t o)9Jo c^)V )09 ‘Ooo 9 jc*) cd) \S\ ^ 1 a 9 
o»9lx» q\ dvta to o\ W/j SI ox> idSiw u9iV)09 tOwuu&H d\3W\ 

.O/mQ OVwsiJjuo &» ^a9/S q\ 


:odSsi>\ (W body yJoSxH d>ta ^)\iH >9^ o)\il) (pS 

<figure> 

<img src="ha.png" width="150" height="120"> 
<figcaption> 

Fig.l - Logo of Hassouna Academy. 

</figcaption> 

</figure> 

:^\iH diwdV) 1x0 /&}&) oM)o)\ dxi>»3 jjdq 

0 test.html — □ X 



Hassouna Academy 


Fig.l - Logo of Hassouna Academy. 
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150 0 &/X (jjmtf'l bo<*m> o)^)o &09 (W oj\ Jd>V - 

.120 1 ) 9^9 

<pj c^ab WwQxjg 4 W)VxS\ (W o)9jo)\ o\ Jd>V - 
.figure \ d>ta ^9 * 5 )^qU «> figcaption 

(W body /JoixH i)>b >9^ bo\ji (&9 

<figure> 

<figcaption> 

Fig.l - Logo of Hassouna Academy. 

</figcaption> 

<img src="ha.png" width="150" height="120"> 
</figure> 

: ^ViH dLiSyiVj \jtO oM)o)\ dmu x»9 



(WU 9 H oV 40jsp,ck)\ cxx) 9 W (W i)5jn}\ g\ 9 ^ o\ Jd>V 

.J^\ J\ >9^ ^ odai qo figcaption 
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Map Tags <V&\ fw 


9*\ 039)0 o)W \i)x>9 tSjg ooljj a*? o)W map 

39)0 W/j d) .cxx)\j 39)0 &n OcoVjtjj o\ W/j V .)9)o)\ on cx^9A><n 
oa>o t(? fl>eo dlib Ww)i) o)x>eo area oa)axn wx>o (WJ ux>o .o)lx 9 
.^x^<j’xi) £/>\ 039)0 (j)\ dflxj g\ />\ dxsu l&xl^ JdxjoH (W \S\ 


:axiVlH ajuwVl Vg\ <S/Xti o\ x )^9 .odx)/> oxsib «/) cdf \S\ 


.area (OJN9H9 map (OJN9H9 imp (&x»9H f\x£xx»\ - 
.map ^jV> damn d)Jb 039)0) \ cio^x) imp (WU9H - 
.imp 03930!) cxxax)o>o (w a) name Jam) map 

oa>o .map (wa9)\ d>ta )/io 0^x9 area ^9)1 V»\ 
09)99 .d(& s\ q\ &)>n q\ dxia'xMxn 9I o/j\> (wu) area fi! 
i)\ax)V\ (jdx ux>o area d>ta Jm\) £309) 0^9 .J/n /X^ 

.bx>od\ aaj&x/dl ^ Jdx)o)\ xx^ cxx)\ 

(wa\) ax)oV> eO&no (cx'w .map (wa<d) name <Vjb^\ xx> - 


map (w» 9H (pj»\ (?>S # jn/Jl V&) imp usemap 

.imp (WW9H an map ^9)1 Jw) (pix) 
ax)o\>9 .d(mU x)x>d) shape cxx)io\> 0.) area ^9)1 - 
wx>d) href axjoV>9 .(Wtt/)\ JsVflj g\ ^Vx)\ x)x>d) coords 

.dliadl Jdx)o) 1 xxi? &xaxw) £x)\ Jw\/)\ 
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)lu>\ dj\s) c^V\ gx» ax)\i)\ ita>o (W 














Oj^juCxJI AaJ Juojl 


(oJdNQ Odl^ <xl)\ (jbo XA>JO <xl)\ X>diUO 0)9J|Q 
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$us)\ uuH ojspo 


/JO» £ oOT\ Olal/sVl ojtyo 


<Uil JJaL 4jajjI£I ^ _ (_il jj^VI AjIjJI ^ HTML 4*5 
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z>dH o)<jjo 



(jlVsil mH ui? oWw! £ bo<*m> ja>\ ojsPO 
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o~V\ dnxH aja 5 - 

H§ xjq>oo (juH xSwxn /&}&) ojspaH obxxdl (jxmsI jDX)<d\ xx^ - 

cxxx$\ /iaib oin (w»\ JdxjgH xx^ - 

0V»\y^8 V\ /&}&) yJO® (0)u\ jDX)icd\ XX^ - 

/Mil 0)<*)|O /&iw ,J&>V\ />dH Jojuioil - 

0)^)0 o\v»\ cxbxn (wwb odxx>oo 0/)b dbubil xx^ - 

t * 

o\s>xttl ^9 b 39 xa> xjo>\ 


(pjul ^xn (pjul S\ <jfl><n dbxb (pjM) g\ wx>oA !oxb\ 

Jax>o tb>o /Xcjo din <jXn odbog t dx)&ban Vxis fxMwb c9<^ 4/Xc>n 

.b^oiudl (jia 0<jfx9 4axxlliV3 


dim) l q\ 0/)\x)\ g\ dxjbbiudl 91 qju) cxxflp (plxj on x)V !oxb\ 

bo §x)d 3 jfis xx) (pi 4 Vg\ ^SJoicucxU 'flxMwb dbu £\ 9*\ ^gbioxxH 
. \xx> &)\x 9 4 0 ViwiV\ x)x>d cxn aibx) ta]a)/>d\ olbdxj 


au»b»V\ (pxu/b (px&lan 

V»\ 40 ) 6 /^ dxn odqj) &)/aH <a\ c 9 ^j>b 4 x>\g <<j)» dxKxwudb &),jd\ 
Wu) (pb p/n o]ofl) Viad O/jlxHg v& 0J9J0 cilbb dxjbbiudl 

.cxxxaxx&U d>/xH obb (pju/j cA)l)9 4Viax>x>od ,k& tixcd Wig l&bo 
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* ^ j 

gx» &)/Jd Q& ^ (WM cUx>o ^Jocuall dU&H 

gun ifcU J\ M 



9 >o cx>ojo (fc&w d)ou ^ ~<xm) (W polygon 3Jdic>» dldadl 

cdafli a*? /ub Y &» X oa> t Y .Jblajg X JaVai $),i> oWH 

asV>d\ a*? odxaxll xs) X cxax9 ca> t cxx»lmH >»jo xsx) ibxSa 
jlxaa) l&x^ xxu £\ 4 Vxbti\ a9\>J\ gx^ cxjbaxH xx) Y cxax 99 4 vS,mxH 
ob/j ^ £\ (ww) &x<bxm) polygon &biojfcH o^9 ilog 

.oh&xa) oiU tbioio 
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rectangle iW&mmH &>a)\ <$»») 

t ou)oflj $)yj> 3 J/aH 9*\ dxjbiwuxll (pju) (pi) area (pju^l d>b 

:^\SU djdaxH ^69) VxO 



.dxk’xl) Y (pS )9 X (p5) o)W cx)aaj <a\ (pJju IxOg - 
shape cxxjoVxH J&xx& (pi) 9*1 dxKxwuxH (pjU/J - 
^ rect oaJoJIq area rect ouaH 

(wj ,rect dl&H wx>o xx) qj t dxjam» s\ rectangle 
^W'xH COOrds cxx)io\><H d>\> M (piaH wx>o 
X,Y,X,Y 0969 4 \j 09 f /»/)\) 3 />\q oj\x9 d3 ox) d)oV9 

.X,Y cxxj\a)\ ajbaxH (&x9 (W X,Y cxjb&H (&x9 3 \ 
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circle o/)\xU 

cjboi (w X,Y oolw b^ai 0/jlxH (ww) (wj area ^ 

dldadl 1x0 t Radius /]m)\ 



.O/jlxH cjboxxa £ O/UxH <a\ (plxi IjOq - 
(ixoj )\xa» d9 Wq tO/ilxH 0/0 /)duH cixcd )\xa» >\j Wla - 

.O/jlxH O/juo /jbuH 

circle cxj&xaH shape cxx)io\><H dxx& (pi) 0/)\xH (WW/J - 
wx>o xx) (w 4^/)\) diw) (jXju circle odiHg area 
coords ax)o\>J\ d>\> u^xH (OAa)l wx>o (wj ^circle d(»dl 
4 'V d3 gxx) dxiVs ^W'xH 

./fcaH cixcd cxax9 <pj X,Y p/jd\ odxa) (jxx9 £\ X,Y,R o <$9 
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polygon 2 sJuoaJ\ <$»») 

X,Y o» oxjWj V JsVflj s)/i> .^JuckjfcH $ju) (pix area (wu 9 )\ £ 

ojoflj do ox) b&xam» Jos>iQ> x& (wo Jo lax) \ ox& omVx»\ (W 


:cxx)\xH d^&Vl IaO ^dlJaxH W"xx 9 



.l&) (WU/J Jolsd oJ 2SJoick» do ol (oJju IaOq - 
poly b&xflH ^ shape axjo\>d\ jox& &l)iaxd\ qju/) - 
dta ^ polygon )Wxx>\ poly cxaIiSIq area 

oxxo^H d>ta (&xaH ux>o (jxu t poly dimU wx>d xx) (W 4&Uo» 

^/JV) £/>\<) wxx9 do" aw dooV9 &» (Jl^xH coords 
to (jX> \>1&9 xl,yl,x2,y2,x3,y3 0^9 * "," W 

.W/j £"x)\ d5dad\ J\ 
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(ks)\ £ /^\ 

tip 6V3oSiV\ VisJ (ojwO lx)lx>V\ W/j %\ 

\» OplS x9 c^) \S\9 4 \x> Jaxm) olU dxasu 4 ^!cQi 

image £<jx)\ tx» input oVmil $ c9<*w ^xpr dl&) 

ooulmH dfl>o t 9 six» o\io S\ £ ckkib qj form (WU 9 )\ d>\x) 

.Wxa) (jxH cxi&axH OVx)\x>\ 

:oiafl>d (W iJlxH >si)S\ ov’ylj t9<*>w \S\ 

<form> 

<input type="image" snc="map.png"> 

</fonm> 

il&bdiUQ 4W>Vfli W/j (pi g j\»V\ ^ JojuickXS ^VxH dljadl /&1&X9 



PAGE 264 


Create Account Now www.hassouna-academy.com 











<ui! — <_il jj^VI AjIjJI {ja HTML 4*3 

(j£ /^\ + ii3jLujj .ikLwjj liljILuilj - (JjjLujSH aj'v*^ 4_jj ■ ^ AaajjISI 

www.hassouna-academy.comwww.youtube.com/user/HassounaAcademy 

axlaiU oa/>d)V) &x&3jua)\ JbVaiU yjo> 

,j& X oax9 JqV\ 4 o)9xjo]\ abuxU b&\) dxioim) an)aaj - 

1060 X oaa 9 oxi\i)\ ojofliDg t 330 <j& Y a&x9<) 940 

.940,330,1060,360 boo^Hg .360 ^ Y cmu99 
ojqa9q 990 (j& X oax 9 (JgVl cx^aaxW ib3io oa^ lU&unA) au)&aj - 
Y a/\x9<) 1050 X o&x9 ou\jM ojaaiDg t 610 ^8 Y 
.990,610,1050,640 tefeN 9 .640 
200 X oaa 9 b^axl) t/ )o» cxa-Jo oxiioai - 
oax9q 260 ^8 X cxaa9 aw\iH ai&axDg t 140 ^8 Y cmu9<) 
.200,140,260,170 boo^lo .170 Y 
ojaai t y=3 t X=480 <jM cxi&aj t/ A>V\ /Ml) &JjaaJ\ JaVai - 
t y=70 t x=580 bflti o^ai t y=3 t x=505 owVS 
t X=620 cm»\> oiaai t y=3 tX=600 wqlj o]oaj 
ojoW cx)aaj t y=40 t X=610 awnW oioai t y=3 
t y=560 t x=960 oi»VS okai ,y=50 ,x=650 
t X=800 b/AiVi? o]oaj t y=680 t X=980 cmilj o)aaj 
oj&ai t y=580 t x=780 o»\> b^ai t y=680 

t x=670 /Jap bolVS o]oaj ,y=490 t x=680 ow\j 
t Wai>o 9 i 8 Q t o)\xx)\ o)aaj ouiu (jis b/p-l b^ai t y=390 

480,3,505,3,580,70,600,3,620,3,610,40,650,50,960,560, 

980,680,800,680,780,580,680,490,670,390 
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<j&<) y=380 t x=460 cix^jg O/jlxH - 

W/j $'A\ jlxaxxll) xxu £"x)\ cjboi uVm>\ 0)9^9 

4(490,380) <j& Vi&9 ajb&H x>V3 (W 4 Vxa9\ 
t 30 490 460 ^ p/d) x cxax 9 o \9 dax)l )9 

.460,380,30 000^^9 ‘30 J&aH cixoi \S\ 

c/bdixaU mi 

W) ^9 4madena.html (p^\) ox)x> html todDo <Uxj\) 
:a)M>\9 ^VxH cij\ body d>\) (W 4 (xxxttWV\ f9x»9)\ 
<img spc="madena.jpg" width="100%"> 


tax &09 4makkah.html (wu\) owx> html o£*fl)o (tx9 
:a)afi>l9 >9^ ud\ body (WA9H tl>b (W 4axwxWV\ f9>»9)\ 
<img src="makkah.jpg" width="100%"> 


tax &x&9 4egypt.html (ojwVj oxxx> html ~$*soo <\ixj\x (os 
:cx)m>\9 ^VxH oSj\ body (PJA9H d>b (ox 4(xxx»WV\ ^9^9)1 
<img src="egypt.jpg" width="100%"> 


f 9 XB 9 H l&x &09 4 Sea.html (pjul) oxxx> html oMxo <lmx\x (pS 
:cx)m >\9 ^ViU X 9 $\ ooJ\ body (WW 9 H d>b <px 40xxixlxxxV\ 
<img src="sea.jpg" width="100%"> 
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Wi ^9 taswan.html (w»l) ox>or html 0&&0 (&9 

:a)M>l9 l body (W139H d>ta (W iOxwWVl 


<img src="aswan.jpg" 

width=" 100 %"> 

(W . 

DOdy /JoixH bo\ii (p9 


<img src="map.png" usemap="#country"> 


<map name="country"> 

<area shape="rect" coords="940,330,1060,360" href="madena.html"> 
<area shape="rect" coords="990,610,1050,640" href="makkah.html"> 
<area shape="rect" coords="200,140,260,170" href="egypt.html"> 

<area shape="poly" 

coords="480,3,505,3,580,70,600,3,620,3,610,40,650,50,960,560,980,680, 
800,680,780,580,680,490,670,390" href="sea.html"> 

<area shape="circle" coords="460,380,30" href="aswan.html"> 

</map> 

:^\iH dXjSxWj 1x0 /&}&) oMJoil dximi xjoq 
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VjjO pjg oV\ 



dl&H VjjO lx) 
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:^\SU dimH 1x0 wxSxll pjg jojuioi oV\ 



dl&H \j 0 lx) /&}dx9 
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1x0 pjg /MU jojuioj 



dl&H 1x0 lx) /&}dx9 
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:^\1H d(&H ^09) VjjO wxmU pjg oj^xaH obwxH Jojuiai oV\ 



dl&H VjjO lx) /&H9 
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VjjO wimH p)Q bio Jojuioj 




. \u> d»Vsi)\ (p &9 (W oAU lUaiu lil&g 
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Picture ) 9 »)\ ^ $£>ol\ <p »9 

S)/i> ofiS (0U9 .G09H oc*fl)o ^ )9)oll (j 9 0Vjai>dH ciox) x>9) 

ox& dx9 alb .source (ow^H as»9 .picture (WU9H 

o\ oC*)9 CSS axl on )9iox» >9! x>9) oi \9 loxxil <\>j f9x»9l\ 

\’x& oV ./woo >9) oi \9 $lflj V9 .oxl<? dfiJti o 3 \q \xx> cm (jx&sx) 

./>\ u\xl ^9 l&lxJoVax) CSS oxb .oottUlg 009H d)o\ /xxx) uVxlil 


:o)ofl>\ (W body /XaxxH d>b ^\x)\ ><$1 o)\xb (o9 


<picture> 

<source media="(min-width:800px)" srcset="ahmed.jpg"> 
<source media="(min-width:500px)" srcset="egypt.jpg"> 
<img src="ha.png"> 

</picture> 


. Vq\ a>/m) VjjV .\b9xi 




.img (p.x»9Q source gxxm&q 009 picture (ox»9 x>9) - 
.css ox) j\^\ <j& .to media ox)o\><H <kx9 loxxil - 
.srcset oxxi^lV) source (0^9!) o)9jo)\ wx>o (w - 

.oxxol/bVl ,ji8 0)9^1 ox& 0*\ (jXjy lx& imp (jxw^H >9>9 - 

9*\ o» /p\ ^iuokH ck/i? o'j \S\ Egypt 0)9)0 - 
. (min-width: 500 px) css x$ iWu 500 ^\m 
9*1 on /p \ ^suokll dps? otf \i\ ,&)&) Ahmed 0)9)0 - 
. (min-width : 800 px) css iWu 800 ^9^ 
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dxx&j X3UQ tO/xjuo ^axaxjdl ox9\j ds>\ dxx&xH dx9 !axu\ 


i^VxH d(»dl) VxO 



ofiSg t iWx) 500 o» ds\ 00^9 dxmxll <x) - 


.img (cxw^l (j 9 059 > 9 jo]\ oj^xcdl Ufi&h 
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^suioLdl ox9li 6&f& guo wjo c9<*w cU*fi)iCkH <ViSlg - 

:J\D\ dlJSxU duo cs^lxmq tdu*5lu 500 dxco <j> 



^ajioLdl ox9 Vi dp,# guo ujo c9<*w cx><fi)iCkH dp^ <VjS\g oV\ - 
:^VxH d(»d\ duo cS^xwq tdw^ 800 dxcu 
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Audio and Video %ui)\Q Oyd\ f w 

obym db c^l oMjo Ospo)\ dutib adami 

.oVnboil cm) an .audio, video, source f^\ 

dys.)o uy <d mp 3 ai&an dxn>d) dyn ! cxxxj\ 

osib dkH axnm) (&9 odxA>d jjd (W .cub? U/M) Vg'l 

.93xxsd \q f\& ojV Ixpr .,j1j Vn a>\j (d .horse.mp 3 

:od&fl>\ (pj body /xdxH d>ta ^ViH cn\ji (p3 

<audio controls autoplay loop> 

<source src="horse.mp3" type="audio/mpeg"> 
</audio> 

: ^ViH dSdSdVj \jqJ oMxdl dmu xjoq 



.09xd\ dutm) audio 'fliMwd (pi - 
.O^xdl ciln )won wt>oi source (pni^l 'fl&dwd (pi - 
.Source (pjud) src cn)io\><H $)/i> <*& cikH jwion xn>o (pi - 
.JVflliH dxsidb autoplay btip\> 'flxSo^l - 
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)) dx» 09x0)1 o\9i\ jW>V controls cxuo^H - 

.(pi>oM u\^\ />\ (j)\ 09 xa)\ (t ^9 axx» &x& 9 » /jyjwg dxx&xH 
.09xo)\ ^Joa/d ^W) V\ jl/xl) loop cxxxo\><)\ 'flxMxal - 
source type oxxol^l $3/^ a& ciy\ Zy w»d (w - 
ogg t mp 3 ^9 audio/mpeg ouia)\ x>ix) 
.audio/wav oo£ wav t audio/ogg f&*m 
.type cxxxo^l flxSwal 09X) source dxjuad dhi !axul - 
.loop ax)o\>J\ 'flxSdwl 09X) audio dxjuad dh) ! cxx3j\ - 
.autoplay oxjo\>^\ 09 x 3 audio dxx&j dhi !<xxjj\ - 
u\qA rfb dp/X a) Control axxo^H co£ (p) \S\ Icxxxil - 

.09xa)\ ^ (pi>dH 

V x9 dxamH (W tUUtoplay oxjo\>^\ flxSojul xxi? !<xxjj\ - 
W/j aiV tO^axokH cijojo ^ oc^axdl dwx>o oo\x) &» 09 xo)\ \xw 

.server f>\><)\ gx» dxxsj o\ 

'flxSd^l (oxj (pig autoplay axxo^H a)\jj (W \i\ Icxxul - 
dfljy 09xo)l &|ba» <a\ ^30 efe 4 control axxo^H 

./&}&) <a\ 093 oCnaxcdl oxal> £ 

audio ^9)1 d>\i source ^9)1 flxSooul <a 5 uw !<xw\ - 

dx 9 GX» \jJjt 9 VxO iGXX 5 » 0 9 X 3 djuSw 0 X 9 \x)\ CXQ/P /XX 3 D XX^ UX>0 

axjo\>9 preset cxx)o\>o ^picture ^9)1 &» 

.audio d>b source on tf\ ^ oh \9 t media 
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(W body ydoixH bo\ji (&9 

<audio controls muted> 

<source src="horse.mp3"> 

</audio> 

:^\ 1 H d(»dl) 1 x 0 z&iw to&xdl dmu jjdq 



\x) muted bdJo\>J\ ><*>9 oj\ Ja>V - 

.C09H oCxsdo dxsid bolw <*oa d)Jb $lx» 

.source (pju<d) type 'fl&ojul ogw iIaju - 

(pj body d>ta ^)\iH >9^ cw\ji (&9 

<audio src="horse.mp3" controls> 

</audio> 

: ^ViH d\JSyiVj 1x0 oM)o)\ dxkmi jjdq 



.source ogw /&lx» dl&) audio Jam &iaaxd\ o\ Ja>V 
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(W \» o\ d/\s) o\ oi>o !cxuj\ t <\>j t^xxaU dx 9 g toVl 

tloopg autoplayg controls dx» o^l dxsid ^ 
oixsb Vjico\ cx»\>>d\tt\ (WJ t )Vu>\ Olgilg (pi>o 0 \q)\ on <yb 
t &*suo)\ 9 )xx 9 cil» dmi IxIjC*) £’xU video (PJU 9 H &» aaj^l 
tOcpoil &» Vq\ Vis>yJSi (pj Joa9 t aW/» 1&>/W) (pi) a) e$x )9 

.9)xxaH &to/d (p&aH uixsb WxMwd o\ d) o5j&) 9 
\n &)\j 9)xx9 cii» dxmx) cx}>W) dto oVl !axu\ 

.video audio (pa» 9 H dlxmwl - 
.mp4 9)xx9 &to) mp3 t> 9 )o)l &to dlxuwl - 
mp4 e0 ^jxxsdl &» source qm?!) type oxxqV> - 
video/ogg ogg e$W ,video/mp4 ufi 
.video/webm c33j webm 
9)xxaU o)<jjo cb/jb video d>\> controls flx^xwl fx^ - 

f xSojaxxxH ,.pr) <Sy& i^Valj d)Jb cxlxm) (pj 9)9 tdxxiSd OIqaI oqxj 

.cxx 9 (pi>oll 093 cxjx&\ix» 

ddo) VxojI t to audio (pju 9 )l) 09 JO &to> dxjtftj (W W) - 

.to video (pjw^Vj 93xx9 dx3uad 

.d/a .30 c99>» video (WN9H &» Ospo &to flxMwl (jxi 9) - 
u 9J0 dfljy c99\a audio (pji39)\ &» 9 )xx 9 &to f\ x>oj»\ (pj 9) - 

.0)930 09x3 to 
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tui/jjVl gx» video.mp4 cil» 

.G09H tixsop dxsid cul^ 


(W body d>ta >9^ cw\ji (&9 

<video contnols> 

<sounce snc="video.mp4"> 

</video> 

:^\iH 1x0 oCnaxdl dmu jjdq 



.olU d)»c»io (j5wi> dim iIajo 9maH o\ 
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cxx)o\><H fliMwiV) <j)xxaD poster oj^o 'flx^xwl Gxi/co 

.video <px»<$ poster 


:a)afl>\ (W body /XaxxH d>\x ^\x)\ cx)\xb (&9 

<video controls poster="ha.png"> 

<source src="movie.mp4"> 

</video> 


:^\xH d(»dV) 1x0 z&iw a>iuo)\ dxx&j xsxq 



VjjoxSdwl VxiV cASxq kOwxiu <*)xxaH gx^ cilx>o /XwqxH o\ Jd>V 

.^xxflU duuau dx9 ojtyo 
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video audio preload - 

t bC>juo)\ du&>o xx^ (jjydail <M dxa>d u>o oil oJ\> ^ 

cb/i? cw/^ dxosi) ^suiox^l )U>\) preload cxx)ioV> 

(WJ9 cjojq ,j9 ax)o\^\ a’x& (&xx x9q .fxSdwxd) 

.autoplay cxxjo^I 'fl&dxal (w \S\ \»Vjm 

o\ aJ\> ^ auto axxxaH preload axio\>)\ j>\j - 

.bc*suck)\ ita>o i\& d»V j5Vj cikH itod) o\ t^>o 

o\ oJ\> ^ metadata wxxaH preload oxioUl j>\j - 

ita>o xx^ Joa9 oxigV\ OlilxxH duaM) f^a) o\ u>o ^axcd/\H 

.&*a),a)\ 

^.axcdjdl o'\ oJV> (j9 none o&xaH preload oxjo\><H j>\j - 
.b£*a)o)l dxxx>o xx<? cikH dxa>d) f^a) V 
apoV>d pixel bto <Vto\) <*)xxaH cxq/Pq g (pl>od\ ajuu - 

.ciiQyjtH ax)oV>9 thlbJl 

audio (pju<*H £$> track (ww<*H flx^l oIaj - 

q\ cxxM^xH OWmll Olala g\ OW/ill wx>ol t video 

ox)/» oC*) ^xHq 4 cxoi (jl^ £<*x>o (jxH OlalaH 

:J\x)\ dx» iddVx»s>H dxm> xx^ 

<track src="sub_en.vtt" kind="subtitles" 
srclang="en" label="English"> 
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Object and Embed &W\ duw tw 

<53xx9 096 Vq t( 0 />dn OWajox l&x 9 x>d .C09H &9\9» cxoju ^xl 9 i\& 
Olabo (waV) cxoaxH Via>J«.) W) g\ SWI JdjUq Olabo <j& d) 09)0 9I 

q\ embed (pju^l '^/b html ^ l&Uxxsb &x}&xmj9 tdwvVaU 
V tail uamolg ciiojo cb/> 9) !<xxjj\ 0^9 .object (WU9)\ 

i w t * 

^jjo b/j g\ .l&lxjuab dxa) V axlp dflJb £’x)\ cixabdl o\ (jd^l 9 .d/ox) 
c 99 >w oV\q .server f^\ l&kjtftj w/j Iajj 9 ! .l&) ap-^Jio 

Olabo dxjuab cx)/>d) hi.swf (wul) cibo dxxx>d) f9ai 

.cO/X)\9 )9Xo)\9 0)9x0)19 09XCk)\ OVflbo ^8 Jd)W9)\9 

:a)oa>\ (W body /xaxxH d>b ^)\x)\ >9$) boVji) (&9 

<embed src="hi.swf"> 


:^)\x)\ d(»dV) Wf /isjw bc^axdl dxx&j X539 


D test.html 


— 

□ X 


Hi! 


▲ 




▼ 


(jxxol ^ embed (&x»9b src axxoVX dxxio (W9 .c^/Mn cibo \kia 

.dxxxx) Swf cibo 
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(pj body ydoixH i)>ta bo\ji (&9 

<object data="hi.swf"> 

</object> 


:^\1H 1x0 ofeiuoH dmu wqg 


Q test.html 


— 

□ X 


Hi! All 


▲ 




▼ 


bdJo\> (Wq .Object (pju^l) .(iy\ om dxiftj (W Ja>V 
.d/m) swf (ii» qu»\ object data 

:oJm>\ (W body ydowtH d>ta J\j]\ bo\il) (pS 

<object> 

<embed snc="hi.swf"> 

</object> 


: ^ViH dXjSyiVj 1x0 ,.&}&) ox&xdl dxsiaj mg 


] test.html 


— 

□ X 


Hi! All 


▲ 




▼ 


.embed bJ>\w (w .object (pjusJV) dmd)\ (&j Jd>V 
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iaUjl dxsusb f m t>Vjo>ta 

o» dfi height ax)o^>d\9 width ax)io\>d\ oiw - 
.dximH (j9 ^i>dD .embed (WN9H9 object (&W39H 
.embed (WN9H9 object (wusJl) sdxx99 Ospo dxm> o 3 jw - 
(jxw^H g\ .object (wusW type oxjo^H Jawo <a 3 ufc) - 
.video (WU9H9 audio dx» .embed 
Vjj\ (pJjtH &» a"x&) type apoV>Od oj\x9 of^pS d xx^ - 

'fxMmi ^x» .(plxl) dig .Wjqw iksj JwW^l o\ dx 9 on \i/)S 

application/vnd.adobe.flash-movie 
.mp 4 atod audio/mp 4 .swf 

099/5^)19 <W»V\ 0X&) uj/iiVl djo'j &>/Q x>9)9 .\)i&9 
^89 l&»\x>dW 3 \ xx^ c^i/xiVl OVata] ^xs» 9A9 MIME 
.Multipurpose Internet Mail Extensions 
0^9 .USemap cxxjo^H 'flx^xal tdjw object (0JU9H &» - 

.dxicksl img o)9jo)\ ^9 

.form ax)o\>d\ 'flxSiwal q ixx) object ^9)1 &» - 

&\ .^9x>co oJ cxixx) (jxx»9 9&9 param (&W39H f\x><xxtt\ GXiAJ - 
object (was)!) cxxxxo (jxx 9 dW)V 'fx>Iwp9 . 8^1 a) cm) 

.value axjo\>d\9 name ax)o\>d\ ^9 oo oxxxjo\> 
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Base om\>»V\ 


j * * * * _ j 

f\& dbb Olabo 3\ O9)o 9 >xx9 )9 )o o\ abw 


^ A . A 

^ixx9 0\)W» 'fxMxiij Vq tOMxdl <^9 u)\j )W» on o^xx) 

cibo dx» Olabo a) x >09 images (pxwl) xb*» ebx) o'\ cio/ii) 
.£>\ olabo s\ gV tli&s? img2.jpg (ibog imgl.jpg 


o)9J09 iha.png 0)9)0 009 files <puV) xb*» x>9) 


^99 t dx9 gx» (p,&»\)>dji)\ (ox o)d\ hi.swf cil»9 ahmed.jpg 


1x0 >9^ 09b o\ (jXuibJl on a)\>J\ o’x& 

<img src="files/ha.png" width="200"> 

<img src="files/ahmed.jpg" width="200"> 
<embed snc="files/hi.swf" width="200"> 

:^\iH dl&H X&9) 1x0 cio/xH (pjx 199x1)9 


D test.html 


□ X 



(JXX119U9 40 /xi gx» /0\ files xb*xd\ )W» f\x>dx)i\ (w oil i>>^j 1x0 9 


\» &)\j eta il’xis eta ^9) base 
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:head (m» 9H d>b JVxH base ^9)1 xp boVii) $$ : Vg\ 

<base hnef="file/" tanget="_blank"> 


:a)afl>\ qj body d>ta <^1 >9^ boVjl) (p9 : VxjVS 


<img src="ha.png" width="200"> 

<img src="ahmed.jpg" width="200"> 

<embed src="hi.swf" width="200"> 

<a href="http://www.google.com">Google</a> 

:^\iH dl&ll) VjoJ yJsh oM)o)\ dmd xx>9 



q\ xbodl (pjiil 09)9 ./&Vuo dlib OlfllaH L4O efi\ Jd>V 
jJc*aJ\ £/>\ OVflin 9 *\ ) 9 J 0 uaxSuwl 9 ) efi\ !auj\ 6^)9 .)WH 




d>b target awo^l >9>9 Jd>V9 .WI&ojmI a) files 
^isu o\ (jix) \x&9 . blank wuaH V&9\ia^\9 base 
oAisiu o\ wV 6^)9 .<ixl^ /99) \jiia9 . blank &&9H .M9/H 

.ax» dnVx'dl \u> 
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Dialog <w»g 

cm g\ a) open dialog 

V» &)\j d) ou» ^ ob\j 

(W body /wH d>b ^\i)\ cu\ji (pS 

<dialog open>This is an open dialog window</dialog> 
<hl>Welcome to Web</hl> 

<hl>Welcome to Web</hl> 

<hl>Welcome to Web</hl> 

<hl>Welcome to Web</hl> 

<hl>Welcome to Web</hl> 


: ^ViH diwdV) 1x0 duuau xjoq 

Q test.html 


□ X 

Welcome to Web 

This is an open dialog window 


Welcome to Web 




:J\H\ dl&H duo ^}ivnug ^iucjddl /xjucu (&9 oVl 


0 test.html 

— 

□ X 



▲ 

Welcr 

This is an open dialog window 


Welcome to Web 

▼ 


.hi 
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Div 


i/bw i)a> 9&i) !cxxu\ gx$9 tai>\w AoVixil da>o (W139 9A div (WU9H 
ox& >>\ J\ t pre (OJU9H9 hr (OJN9H9 P (OJN9H9 hi (0JN9H duo 


idnulV) o>juo)\ 6 p>/& x>Vjg t W\x>dJu\ u^ yduw <jj)\ ^9^9)1 

'fSA o\ &x|bjjixj9 t d»^V) oMj^I cb/P )>\j div (WN9H \ji0j\9 

.Wxjbjj) o&xsdo div (w»9 guo A \ d/ax) 
i/)m i)a> V ,jiH yj|oVjxH9 t/ ]ww i)a aoVxsH ^ A *\ <s/xx> <sy& 
daxx) (W 4 \xx> html bid) eb A )\uo guo <j&xxj o\ xx) £/>\ ^joVx^q 

.CSS bxD\ b,j\uo 


:a)bi»>\ (W body /XoixH d>b ^)\j)\ >9^ bo\ji (o9 

<div>Welcome to Div l</div> 

<div>Welcome to Div 2</div> 

<div>Welcome to Div 3</div> 

<div> 

<inputxinput type="submit"> 

</div> 

<div> 

<inputxinput type="reset"> 

</div> 
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:^\1H d(»dV) 1 x 0 to&xdl dmd wqg 

0 test.html — □ X 


Welcome to Div 1 
Welcome to Div 2 
Welcome to Div 3 



Submit 


Reset 


d>ta br S\ V Jd>V - 

Vising div d>ta (W oospcdll <a\ Ji>V - 
.div d) tdlg 

o» div d>ta 13/3 Vn dxO*) ol efi\ Jd>V - 
d>b div o\ Cti>\ $ (jb-9 d) 0 \Q 3 \ 

(p,x}ailJd />\ t div (pjug 
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Span 

t)/i 3 V 9&9 Icxuil 0^9 t ol>\x) oo9Xoi &X&9) (0JU9 9& span (WW9H 
z>\ J\ ti ^9)19 b (WU9H9 label ^9)19 a ^9)1 dx» <./)m 

t _ 

> 9 > 9 a]\ nso 00 x> V39 4 Vis.»\ x>oj»\ xx^ li >33 V f 9 XW 9 H axis 

t oJ>\w V» jlxaxx) cj>\j span (w»9)\ \jic0\9 t Jaa 9 l&l>\x) 
^9) c6><fl)0 ^ span (W»9 gx» $\ dflJb ^93) <a\ &x)axx»}9 

.oooxoSdo 009 x 0 } 

:cx)m>\ (W body /XoiJtH d>ta ^ViU >9$ l oolji (o9 

<hlxspan>Web</span> Worlck/hl> 

Welcome to <span>Web</span> 
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